在新项目上首次使用了Ant Design Vue 3.2.3
在做动态导航的时候遇到了一个很棘手的问题：无法动态引用图标。
官方给的例子是按需引入的。

<template>
    <home-outlined />
    <setting-filled />
    <smile-outlined />
    <sync-outlined/>
    <smile-outlined/>
    <loading-outlined />
</template>

<script>
import { defineComponent } from 'vue';
import { HomeOutlined, SettingFilled, SmileOutlined, SyncOutlined, LoadingOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    HomeOutlined,
    SettingFilled,
    SmileOutlined,
    SyncOutlined,
    LoadingOutlined,
  },
});
</script>

解决方法：

1、新建文件/components/amanIcon.js

import {createVNode} from 'vue'
import  * as ICONS from '@ant-design/icons-vue'
export const amanIcon = (props) => {
    let { icon } = props;
    icon = icon.split("-").map((g) => {
        return g[0].toUpperCase() + g.slice(1)
    }).join('')
    return createVNode(ICONS[icon]);
};

2、使用场景

<template>
    //大小驼峰都可以
    <amanIcon  icon="AppstoreOutlined">
    <amanIcon  icon="appstore-outlined">
</template>

<script>
import {amanIcon} from "@/components/amanIcon";
export default defineComponent({
  components: {
    amanIcon,
  },
});
</script>