按照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>
显示如下:
0条评论
点击登录参与评论