在旧版本中,字体图标库都是根据type来区分显示,但是新版本中ant的子图图标全部都变成标签显示了,于是在循环图标的时候,依据往常的 <a-icon :type="xxx" />已经不能实现了
如果还需要和老版本保持一致书写习惯,可采用以下方法
新建一个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]);
};
页面引入
import { Icon } from "../Icon";
<Icon :icon="child.meta&&child.meta.icon"></Icon>
<Icon icon="SisternodeOutlined"></Icon>
直接就是官方文档的驼峰写法即可
<sisternode-outlined />
==> SisternodeOutlined