以前用的其它的組件庫，圖標(biāo)有標(biāo)簽，可以直接指定type即可，Ant Design Vue V3沒有相應(yīng)標(biāo)簽，只有<step-forward-outlined />這樣的。為了能動態(tài)展示Icon，做了如下的處理

1. 先下載圖標(biāo)庫 （ant design的圖標(biāo)庫要單獨(dú)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)

// 注冊圖標(biāo)組件
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. 完成

希望對有需要的兄弟有所幫助.