Ant-Design-Vue全网首篇之按需动态引入图标

在Ant-Design-Vue3.x版本中，要使用图标需要先引入后再以组件的形式使用，那如何动态渲染图标呢？特别是在我们项目中的侧边导航栏应用上。

一、使用技术
基于vue3.2+ts+ant-design-vue3.x

二、Ant-Design-Vue使用图标新旧写法

// v1
<a-icon type="step-backward" />

// v3
import { StarOutlined } from '@ant-design/icons-vue';
<StarOutlined />

三、全局引入
全局注册引入，使用了遍历，打包的时候会把ant的整个图标库都引用了，导致打包后产生了1M多的体积，此方法不是很推荐。

// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import * as Icons from '@ant-design/icons-vue';
for (const i in Icons) {
    app.component(i, Icons[i])
}

// .vue文件
<component :is="item.meta.icon" />

四、按需引入
使用createVNode()方法，根据不同的图标动态创建渲染一个dom组件元素。打包后体积正常，不会产生多余的空间。

// icon.ts
import { createVNode, Component, VNode } from 'vue'
// 这里需要关联到路由表的图标 需要用的图标都需要在这里引入
import { CalculatorOutlined, CrownOutlined } from '@ant-design/icons-vue'
export const antIcon = (props: { icon: string | undefined }): (VNode | undefined) => {
    const { icon } = props;
    if (icon) {
        const arr: Array<Component> = [CalculatorOutlined, CrownOutlined]
        return createVNode(eval(icon));
    } 
};

// .vue
import { antIcon } from '@/assets/js/icon'
<antIcon :icon="item.meta && item.meta.icon" />

五、总结
按需引入的方法全网首篇，个人总结出来的，网上找不到相关的资料，希望能帮到你们~