Element-ui Icon 的全局注册 实现图标的动态改变_elementui图标库

目标

实现动态添加element-ui的icon图标，即通过变量动态改变图标

步骤

第一步：引入element-ui的图标库

# NPM
$ npm install @element-plus/icons
# Yarn
$ yarn add @element-plus/icons
# pnpm
$ pnpm install @element-plus/icons

第二步：在main.js文件引入图标库

• 在utils文件夹下建立icon.js

import * as Icons from '@element-plus/icons'
// 统一注册图标，key: i+图标名字
export function loadIcon(app) {
    // 注册ElementIcon
    for (const [key, component] of Object.entries(Icons)) {
        app.component(key, component)
    }
}

•  在main.js文件中引入

import { createApp } from 'vue'
import App from './App.vue'
 
const app = createApp(App)
 
// 统一注册所有 element-ui 图标
import { loadIcon } from './utils/icon'
loadIcon(app) 
 
app.mount('#app')

 第三步：动态添加icon

<el-icon size="13">
     <component :is="item.icon" /> 
</el-icon>

说明：component是vue3中一个用于渲染动态组件或元素的“元组件”。

结果

 补充：如未解决去官网查看相关文档