vue3 Ant Design Vue 动态加载图标Icon

以前用的其它的组件库，图标有标签，可以直接指定type即可，Ant Design Vue V3没有相应标签，只有<step-forward-outlined />这样的。为了能动态展示Icon，做了如下的处理

1. 先下载图标库 （ant design的图标库要单独install）

npm i --save @ant-design/icons-vue

2. 下载完成后在 main.js 中添加

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import * as Icons from '@ant-design/icons-vue'

const app = createApp(App)

// 注册图标组件
for (const i in Icons) {
  app.component(i, Icons[i])
}

app.mount('#app)

3. 在vue文件中使用 <component :is="icon">

<template>
  <component :is="icon">
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'TestIcon',
  setup () {
    return {
      icon: ref('step-backward-outlined') // step-backward-outlined 在ant design vue 的icon里拷贝就可以
    }
  }
})
</script>

4. 完成

希望对有需要的兄弟有所帮助.