Vue3 Ant Design不再支持＜a-icon＞，怎么动态渲染图标

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

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

方法一：

1、新建一个Icon.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="item?.icon"></Icon>

 
<Icon icon="StepBackwardOutlined"></Icon>

方法二：

可以使用component, component是vue的内置组件，主要作⽤为动态渲染组件，基本⽤法如下：其中，根据绑定的is 的值决定拿个组件被渲染。

 <component :is="item?.icon" />

请注意，这两种方式都不适用小程序