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

今天就分享到這里啦。

總結

以上是生活随笔為你收集整理的element plus 引入icon的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。