vue3项目中动态antd中自带的icon

vue3项目中全局引入ant-design

因为antd的icon使用的时候大多是先引入想要使用的icon， 然后再以标签的形式再去使用。如果是动态的使用antd自带的icon，则需要全局引入，

1： 在main.ts中全部引入

		import * as antdIcons from '@ant-design/icons-vue'
		// 全局
		const app = createApp(App);
		Object.keys(antdIcons).forEach((key: any) => {
		  app.component(key, antdIcons[key as keyof typeof antdIcons])
		})
		// 添加到全局
		app.config.globalProperties.$antdIcons = antdIcons 
		app.use(Antd).use(router).mount('#app')

2： 在需要使用的组件中动态使用

	      <div  v-for='item in list'  ;key='item.id' >
					......
					<component :is="$antIcons[item.icon]"></component>
				    ......
		  </div>
      <script setup lang="ts" >
			const list = reactive<ListType>([
				{
					id:1, 
					icon:'StepBackwardOutlined'
				},
				......
				])
	  </script>