【解决】使用Element-Plus icon图标不显示

使用Element-Plus icon图标不显示的解决方案

博主环境：Vue3 + TypeScript
已经安装：@element-plus/icons-vue

就是不显示图标，但也不报错

我的解决方法：

根据官网指引，在main.ts（如果是JavaScript就是main.js）中添加代码

// main.ts

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App) //<---如果已经有了就不用复制了

//放在const app = createApp(App)这行的下面
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
1
2
3
4
5
6
7
8
9
10

其次，当你使用的时候在< script steup >中引入需要的图标（以User图标为例）

import { User } from '@element-plus/icons-vue'
1

直接从官网复制使用即可

<el-icon><User /></el-icon>
1

Element-Plus官网：https://element-plus.org/zh-CN/component/icon.html

注意：
有时候从 Element-Plus 官网直接粘的组件代码中的 icon 用的可能是老的代码，比如，我这边就显示不出来，需要改用

,原icon代码可能是被弃用的原因（待确定）。