vue动态生成ant-design-vue中的图标

在最近使用andv的时候，出现了一个问题，在不使用iconfont图标的前提下使用andv自带的图标库动态生成icon图标。在百度一下后，发现以下方法，特此记录。

1.新建一个createIcon.js文件

 import * as icons from '@ant-design/icons-vue';
 import { createVNode } from 'vue'
 
 export const CreateIcon = (props)=>{
     const {icon} = props;
     return createVNode(icons[icon]);
 }
 

2.使用

 <a-menu
      v-model:selectedKeys="state.selectedKeys"
      theme="dark"
      mode="inline"
    >
      <template v-for="item in menus" :key="item.path">
        <a-sub-menu
          v-if="item.children && item.children.length"
          key="item.name"
        >
          <template #icon>
            <CreateIcon :icon="item.icon"></CreateIcon>
          </template>
          <template #title>{{ item.title }}}</template>
          <a-menu-item v-for="itemChild in item.children" :key="itemChild.name">
            <span>{{ itemChild.title }}</span>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item v-else>
          <template #icon>
            <CreateIcon :icon="item.icon"></CreateIcon>
          </template>
          <span>{{ item.title }}</span>
        </a-menu-item>
      </template>
    </a-menu>

import {CreateIcon} from './CreateIcon.js';
import {Component} from 'vue';
interface routerConfig {
  path: string;
  name: string;
  title: string;
  icon?:string|Component,
  children?:routerConfig[],
}

const menus:routerConfig[] = [
  {
    path: "/home",
    name: "home",
    title: "首页",
    icon: 'HomeOutlined',
    children: [],
  },
];