ElementPlus icon 图标不显示

Question

main.js 文件全局引入

在Home.vue文件使用

浏览器上不显示

Answer 1

河畔一角 2022-05-03 17:57:15

由于官方更改了图标引用方式，隐藏推荐这样使用：
1. 全局引入所有图标组件

a. 在main.js中先导入所有图标

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

b. 循环注册

// 注册全局图标

for (let [key, component] of Object.entries(ElementPlusIconsVue)) {

app.component(key, component)

}

2. 在TreeMenu中动态加载图标

<el-icon>

<component :is="menu.icon"/>

</el-icon>

注意：此时，图标的icon需要设置为图标组件的名字，不能在用el-icon-setting这样的，要用比如Setting才可以

Answer 2

河畔一角 2021-11-12 10:41:32

element-plus新版本不支持class图标，需要按需引入。一般在公司我们都是用自定义图片，配置的时候可以传图片地址

• 提问者 lgk20181023 #1

  我试着使用按需引入的方式还是显示不出来，我改为使用 iconfont 了，iconfont 使用没问题