Ant Design中如何遍历渲染图标

在旧版本中，字体图标库都是根据type来区分显示，但是新版本中ant的子图图标全部都变成标签显示了，于是在循环图标的时候，依据往常的 <a-icon :type="xxx" />已经不能实现了

如果还需要和老版本保持一致书写习惯，可采用以下方法

1. 新建一个Icon.ts文件（也可以是icon.js，博主采用的是ts写法）

import { createVNode } from "vue";
import * as IconsVue from "@ant-design/icons-vue";

export const Icon = (props: { icon: string }) => {
  const { icon } = props;
  var antIcon: { [key: string]: any } = IconsVue;
  return createVNode(antIcon[icon]);
};

2. 页面引入

import { Icon } from "../Icon";

 <Icon :icon="child.meta&&child.meta.icon"></Icon>


 <Icon icon="SisternodeOutlined"></Icon>

直接就是官方文档的驼峰写法即可

<sisternode-outlined />

==>  SisternodeOutlined