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>