Element-Plus,el-icon-plus
在ElementPlus中，Icon的用法和以前不同。本文主要介绍如何使用ElementPlus的el-icon，具有一定的参考价值。有兴趣的可以了解一下。
目录
初步了解Icon在Element UI和Element Plus中的用法区别。在Element Plus中使用Icon的逻辑只是将svg全局引入和局部引入与el-icon一起使用。全局引入和局部引入在Vue生态中，Element UI是顶级组件库。Vue发布到3.0时，Element也发布了相应的组件库。那是元素加。后来的用法也变了。
比如本文中el-icon的用法。
在Element Plus中，Icon图标的用法和以前不一样了。虽然官方文档也有说明使用方法，但不是很详细，可能会给初学者带来一些障碍。
本文将花几分钟时间解释el-icon的几种用法和注意事项。
注：需要注意本文的发表时间和使用的Element Plus版本，随着时间的推移用法可能会有差异。
^3.2.25element-plus: ^2.1.7@element-plus/icons-vue: ^1.1.4
初步了解
Icon 在 Element UI 和 Element Plus 用法上的差别
在 vue2 + Element UI 的用法
i class=el-icon-edit/i
在 vue3 + Element Plus 的用法
ElIcon :size=30 color=hotpink
编辑/
/ElIcon
！-您也可以不使用父标签而直接使用图标标签-
编辑/
个人觉得Element UI的用法会更简单。
在下一篇文章中，我将解释如何在Element Plus的基础上封装一个更好的图标组件。
Icon 在 Element Plus 中的使用逻辑
元素抛弃了字体图标的使用，直接使用了svg。
可以说是把图标拿出来单独维护了。所以使用前一定要下载svg图标库。
下载命令svg图标库:
npm安装@element-plus/icons-vue
也可以通过Yarn或者pnpm下载。
#纱线
纱线添加@element-plus/icons-vue
# pnpm
pnpm install @ element-plus/icons-vue
使用svg有两种方法，一种是直接使用SVG，另一种是和el-icon标签一起使用。
接下来我们来说说这两种使用方式(全局和局部引入都会提到)。
只使用 svg
如果只需要使用Element Plus提供的svg图标库，就不需要安装Element Plus。不过这种场景应该很少出现。
安装命令：
npm安装@element-plus/icons-vue
可以在图标集合中查看Element提供的svg图标类型。
使用从010到59000的图标。如果需要设置图标大小和颜色，需要通过css来设置。
全局引入
all-in方法会全局注册所有svg组件，使用起来很方便，但是以牺牲性能为代价。
svg组件
从“vue”导入{ createApp }
从导入应用程序。/App.vue
从 @ element-plus/Icons-vue //Import * as Icons导入所有图标并命名为Icons。
const app=createApp(App)
//通过遍历注册所有svg组件会牺牲一点性能。
对于(让我在图标中){
app.component(i，Icons[i])
}
app . mount(# app)
如果不想全部介绍，只想全局注册某个main.js，可以通过以下方式在main.js中注册(我以编辑图标为例)
/*省略部分代码*/
从 @ element-plus/icons-vue //导入{Edit}引入编辑图标。
const app=createApp(App)
App.component (Edit.name，edit)//全局注册编辑图标
app . mount(# app)
svg图标组件
模板
差异
编辑/
/div
/模板
风格
svg {
宽度：40px
高度：40px
颜色：红色；
}
/风格
局部引入
本地引入只需要在使用的地方引入即可。
模板
差异
编辑/
/div
/模板
脚本设置
从“@ element-plus/icons-vue”//导入{Edit}作为svg组件引入Edit。
/脚本
风格
svg {
宽度：40px
高度：40px
颜色：红色；
}
/风格
配合 el-icon 一起使用
Element Plus提供el-icon组件来包装svg图标组件，使得设置图标大小和颜色更加方便。
但是，Element Plus需要安装在项目中。安装命令如下：
# 选择其中一种方式安装即可。
# NPM
新公共管理安装元素加保存
#纱线
纱线添加元素-还有
# pnpm
pnpm安装元素-还有
安装完元素加后，可以在全局引入，也可以局部引入。
全局引入
在页面中使用
从“vue”导入{ createApp }
从“元素加”导入ElementPlus
导入 element-plus/dist/index.css
从" @ element-plus/icons-vue"//导入{编辑}引入编辑图标
从导入应用程序 App.vue
const app=createApp(App)
app.component(Edit.name，Edit) //全局注册编辑图标
应用。使用(ElementPlus)。挂载(#应用程序)
main.js
El-icon:size= 20 color= hot pink
编辑/
/el-icon
此时，在埃尔图标上设置大小和颜色就能控制在页面中使用的大小和颜色。
svg图标
局部引入
模板
差异
El-icon:size= 30 color= hot pink
编辑/
/el-icon
/div
/模板
脚本设置
从“元素加”导入{ ElIcon }
从" @element-plus/icons-vue "导入{编辑}
导入 element-plus/es/components/icon/style/CSS
/脚本
局部引入的话，我们只需要引入图标对应的钢性铸铁即可。
如果你在主页。射流研究…引入了element-plus/dist/index.css就不需要在页面再引入element-plus/es/components/icon/style/CSS。
到此这篇关于元素加的埃尔图标怎么用的文章就介绍到这了，更多相关元素加埃尔图标内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。