Vue3 antdv 如何动态渲染 icons-vue 图标（a-icon 不支持了）在 vue3 中 antdv 已经

在 vue3 中 antdv 已经放弃 <a-icon type='xxx'> 的用法了。
antdv icon 官方文档中有 正常的组件用法、自定义方式的 iconfont 用法 ... 其中 iconfont 这种也是可以达到以前版本的 <a-icon /> 效果，只是图标都需要自行提供，如果想要直接使用官方新版本自带的所有 icon，只能另外的方式处理了。
方式一：

Vue3/React 动态设置 ant-design/icons 图标，推荐。

方式二：

// 初始化相关
import { createApp } from 'vue'
import { nextTick } from "@vue/runtime-core"

// Antd
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import * as Icons from '@ant-design/icons-vue'

// 创建对象
const app = createApp(App)
// 使用并挂载
app.use(store).use(router).use(Antd).mount('#app')
// 必须使用 nextTick，不然会有加载顺序问题，导致绑定失败
nextTick(() => {
  // 配置全局对象
  app.config.globalProperties.$icons = Icons
  // Antd 注入全部图标（这样注入之后，就可以全局直接使用 icon 组件，不需要每个页面去引入了）
  for (const key in Icons) { app.component(key, Icons[key]) }
})

通过 <component :is="xxx" /> 动态使用，代替之前的 <a-icon type='xxx'>

<!-- 动态使用（key 就是官方中拷贝的 icon 大驼峰写法，比如下面） -->
<component :is="$icons['BugOutlined']" />
<!-- 组件方式使用 -->
<bug-outlined />

Vue3 antdv 如何动态渲染 icons-vue 图标（a-icon 不支持了）

方式一：

方式二：