antdv 2.* 中如何使用动态Icon

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

（1）新建antdvIcons.ts

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


const Icon = (props: { icon: string }) => {
  const { icon } = props;
  return createVNode(Icons[icon as keyof typeof Icons]);
};

export function setupAntdIcon(app: App<Element>): void {
  // 注册
  app.component('Icon', Icon);

  // 使用组件
  // <Icon icon="DesktopOutlined" />
  // <Icon :icon="menu.icon" />
}

（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>
	<Icon icon="DesktopOutlined" />
</template>