element-plus版本^1.2.0-beta.5的icon图标问题：

继element旧版更新后，新版的element-plus的图标引用修改了，很多小伙伴们不会用，这篇文章将介绍两种用法

⭐前置条件：

npm install @element-plus/icons-vue

全局引用：

打开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>

渲染后的结果 ⬆

如果对你有用，请一件三连多多支持❤