vue3+ts+element-plus动态图标生成方式

1.安装

$ yarn add @element-plus/icons 
# 或者 
$ npm install @element-plus/icons

2.使用全局组件的方式引入

//main.ts
import * as Icon from '@element-plus/icons-vue'

//在最下面导入全局组件
Object.keys(Icon).forEach((key)=>{
    app.component(key,Icon[key])
})

3.在tsconfig.json中新增

 "suppressImplicitAnyIndexErrors":true, // 解决字符串下表报错

4.在组件中引用

<component class="icons" :is="menu.meta.icon" />
//:is="" 里引入后端返回的icon属性
//另，修改一下css样式

记录一下。