牛叔叔 的笔记

好好学习

2022-04-21 14:06

关于Vue3使用ElementPlus不显示icon图标问题的处理方案

牛叔叔

WEB前端

(2508)

(0)

收藏

按照ElementPlus官网的示例使用icon并不会显示对应的icon

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

解决方案是:

首先需要安装icons,使用对应的包管理工具

$ npm install @element-plus/icons-vue

然后在你的Vue项目中的main.js需要将icon进行注册


可以仅仅注册使用的icon

如下:

import {Timer,Edit} from '@element-plus/icons-vue'
const app = createApp(App);
app.component("Timer",Timer)
app.component("Edit",Edit)

app.use(store).use(router).use(ElementPlus).mount('#app')

 

如果需要将所有图标都导入,可以:

import * as ElIcons from '@element-plus/icons-vue'
const app = createApp(App);
for (const iconName in ElIcons) {
    app.component(iconName,ElIcons[iconName])
}
app.use(store).use(router).use(ElementPlus).mount('#app')


这样在需要显示图标的地方即可:

    <el-divider>wanmait.com</el-divider>
    <el-icon>
      <Timer />
    </el-icon>


显示如下:

F255BAE9-C780-4c2d-8C43-2B4FBC0F1F23.png

0条评论

点击登录参与评论