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.效果