关于vue3最新版element-plus里prefix-icon图标不显示问题（已解决）
发布于2021-12-11 11:17 阅读(1334) 评论(0) 点赞(12) 收藏(5)
element-plus版本^1.2.0-beta.5的icon图标问题：
继element旧版更新后，新版的element-plus的图标引用修改了，很多小伙伴们不会用，这篇文章将介绍两种用法
⭐前置条件：
npm install @element-plus/icons
全局引用：
打开main.js文件
// 导入所有的el-icon图标
import * as ElIconModules from '@element-plus/icons'
const app = createApp(App)
// 统一注册el-icon图标
for(let iconName in ElIconModules){
app.component(iconName,ElIconModules[iconName])
}
注意：注册 icon 要在 app 挂载之后，就是这一句代码
const app = createApp(App)
1.这种是标签属性的图标
<el-button type="primary" icon="Edit" circle></el-button>
注意，与官方文档不同的是要把icon前面的：去掉，否则无法显示
渲染后的结果 ⬆
2.另一种类型的图标直接使用即可
<el-icon><goods-filled /></el-icon>
渲染后的结果 ⬆
单独引用：
新版本的官方文档提供的是script的setup语法糖，直接用会报错，建议老老实实导入
<template>
<el-icon><arrow-down /></el-icon>
</template>
<script>
import { ArrowDown } from '@element-plus/icons'
export default {
components: {
ArrowDown
}
}
</script>
渲染后的结果 ⬆
如果对你有用，请一件三连多多支持❤
所属网站分类: 技术文章 > 博客
作者：爱出汗
链接：http://www.qianduanheidong.com/blog/article/257243/57d8137d440d30540a55/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力