ant-design-vue的icon图标动态渲染

ant-design-vue的icon的动态渲染问题

由于在ant-design-vue的v3版本更新后, ant-icon变成是组件使用的形式, 为了满足根据icon-name动态渲染图标的需求,我们可以使用vue的内置组件Component来实现:

``
1.新建一个ts(js)文件

2.编写icon组件注册函数

import { App } from “vue”;
import * as antIcons from “@ant-design/icons-vue”;
const loadAntIcons = (app: App) => {
Object.keys(antIcons).forEach((iconName) => {
app.component(iconName, antIcons[iconName as keyof typeof antIcons]);
});
};

export default loadAntIcons; // 导出

3.在main.ts里引入使用
// 动态加载ant-icons
import loadAntIcons from “@/hooks/load-ant-icons”;
loadAntIcons(app); // 把app传入其中

4.使用方式

icon的name直接去 添加链接描述 复制即可

5.效果