Vue 3 Ant Design Vue 动态渲染icons

//main.ts

import {
          
    createApp } from vue
import App from ./App.vue
import router from ./router
import {
          
    createPinia } from pinia
import Antd from ant-design-vue
import * as antIcons from @ant-design/icons-vue // 引入ant icons

import ant-design-vue/dist/antd.css;

const app = createApp(App);

const antIconsList: any = antIcons; // 重新赋值定义类型 避免后续遍历注册组件的时候ts报错
// 注册组件
// Object.keys(antIconsList).forEach(key => {
          
   
//     app.component(key, antIconsList[key])
// })
for (const key in antIconsList) {
          
   
    app.component(key, antIconsList[key])
}
app.config.globalProperties.$antIcons = antIcons; // 挂在到vue实例上

app.use(router).use(createPinia()).use(Antd).mount(#app)

<!-- .vue -->
<component :is="proxy.$antIcons[item.meta.icon]" />

// .vue
import {
          
    getCurrentInstance } from "vue";
const {
          
    proxy } = getCurrentInstance();

// route.ts

export const Home = [
    {
          
   
        path: /index,
        name: index,
        meta: {
          
   
            title: 首页,
            hide: false,
            icon: HomeOutlined // 引入ant 的icon名称
        },
        redirect: `/home`,
        component: () => import(../views/home/index.vue),
        children: [
            {
          
   
                path: /home,
                name: home,
                meta: {
          
   
                    title: 系统首页,
                    hide: false
                },
                component: () => import(../views/home/home.vue)
            }
        ]
    }
]