element plus 引入icon
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
vue升级到3版本后,引入的element 就是element plus了
不管是从官方文档还是自己使用过程中突然发现element plus引入icon是需要单独去引用的,其实说实话有点鸡肋,不明白为什么单独引用。
废话不多说,上解决办法
1、全局引入
main.js 引入
import * as ElIcons from "@element-plus/icons-vue";
for (const iconName in ElIcons) {
vue.component(iconName, ElIcons[iconName]);
}
使用:
<el-icon><add-location /></el-icon>
这种方式不好的点就在于,把所有icon图标都引入了,一些不必要的都被引入,导致性能可能会差一些。
2、按需引入
在所使用的组件中引入,以Edit为例
import { Edit } from '@element-plus/icons-vue';
components中引入Edit
在html中使用
<el-icon>
<Edit />
</el-icon>
注意,components中的注册的组件名称与html中的一致,否则有可能不生效。
两种方式按自己需要引用。
其实还有一种方式是自己去阿里矢量库中找相应图标,下载代码,以iconfont方式引入工程中也是极为方便的。
今天就分享到这里啦。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)