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

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

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

一般这种情况就是import的图标和你在js/ts中引用的名字不匹配，注意检查一下。

我的解决方法：

根据官网指引，在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)
}

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

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

直接从官网复制使用即可

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

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

注意：
如果你是从 Element-Plus 官网直接粘的组件代码，比如他所使用的菜单图标是<icon-menu />，那么就需要使用他所提供的icon引用import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue',否则会导致页面无法显示图标。