小码问答,有问必答!

2022-05-10 09:23

Elementplus不显示icon???

牛叔叔 2022-05-10 09:23 回答了这个问题

WEB前端

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

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

解决方案是:

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

1

$ npm install @element-plus/icons-vue


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


可以仅仅注册使用的icon

如下:

1

2

3

4

5

6

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')

 

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

1

2

3

4

5

6

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')


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

1

2

3

4

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

    <el-icon>

      <Timer />

    </el-icon>




0条评论

我要评论