element plus 引入icon

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方式引入工程中也是极为方便的。

今天就分享到这里啦。