element plus动态引入图标

1. 在main.ts引入

import * as Icons from '@element-plus/icons-vue'

const app = createApp(App)
app.use(ElementPlus).mount('#app')

//方式一，用component组件
Object.keys(Icons).forEach((key) => {
    // 注册全局组件（组件名，组件实现）
    // Icons[key as keyof typeof Icons]：key作为与Icons对象的键之一匹配的字符串,Icons对象取值与key匹配的值
    // key输出是各个icon名
    app.component(key,Icons[key as keyof typeof Icons])
})

//方式二，用icon标签
const Icon = (props:{icon:string}) => {
     const {icon} = props;
     // 创建icon标签
     return createVNode(Icons[icon as keyof typeof Icons])
 }
 app.component('Icon',Icon)

3. 在组件中使用

<template>

     <!-- 动态组件的使用方式 -->
        
        <!-- 方式一 -->
        <component class="icons" :is="menu.meta.icon" />
        <!-- 方式二 -->
        <Icon class="icons" :icon="menu.mata.icon"></Icon>
        
  </template>