element-plus版本^1.2.0-beta.5的icon图标问题:
继element旧版更新后,新版的element-plus的图标引用修改了,很多小伙伴们不会用,这篇文章将介绍两种用法
?前置条件:
npm install @element-plus/icons
全局引用:
打开main.js文件
import * as ElIconModules from '@element-plus/icons'
const app = createApp(App)
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>
渲染后的结果 ?
如果对你有用,请一件三连多多支持?
|