ant-design-vue 2.x 中Icon 组件动态渲染

ant-design-vue 2.x 中Icon 组件动态渲染
antdv2.*中如何使用动态Icon

（1）新建antdvIcons.ts

import type { App } from "vue";
import * as antIcons from "@ant-design/icons-vue";

export function setupAntdIcon(app: App<Element>): void {
  // 注册组件
  Object.keys(antIcons).forEach((key) => {
    app.component(key, antIcons[key as keyof typeof antIcons]);
  });

  // 使用组件
  // <component :is="menu.icon" />
  // <component is="PieChartOutlined" />
}

（2）在main.ts中引入

import { createApp } from "vue";
import { setupStore } from "./store"; // 状态管理
import router, { setupRouter } from "./router"; // 路由
import { setupAntd } from "./libs/antdv"; // 组件管理
import { setupAntdIcon } from "./libs/antdvIcons"; // 图标库
import App from "./App.vue";

const app = createApp(App);

setupRouter(app); // 引入路由
setupStore(app); // 引入状态管理
setupAntd(app); // 引入组件库
setupAntdIcon(app); // 引入组件库

router.isReady().then(() => {
  app.mount("#app");
});

（3）使用图标组件

<template>
	<component is="PieChartOutlined" />
</template>