vue3中引入element-plus的Icon

最近使用element-plus开发项目，发现element-plus废弃了Font Icon 使用了 SVG Icon。需要在全局注册组件，或者按需引用。

安装

1
2
3
$ yarn add @element-plus/icons
# 或者
$ npm install @element-plus/icons

全局引用

在main.js 全局注册组件。

1
2
3
4
5
6
7
8
9
10
11
12
import * as Icons from '@element-plus/icons'
const app = createApp(App)

// 注册Icons 全局组件
Object.keys(Icons).forEach(key => {
  app.component(key, Icons[key])
})

// 在vue文件使用
<el-icon color="#409EFC" class="no-inherit">
  <share />
</el-icon>

就可以在vue文件里面直接使用图标了。

按需引用

对应的vue文件中直接import图标。

1
2
3
4
5
6
import { Edit } from '@element-plus/icons'

// 在vue文件使用
<el-icon color="#409EFC" class="no-inherit">
  <edit />
</el-icon>

参考

https://element-plus.gitee.io/zh-CN/component/icon.html