vue3.0时代来了，各个UI组件库都相继反对vue3, ant-design-vue也为了vue3提出了ant-design-vue 2.x版本，其中很很多组件也做了相应的调整，例如Icon组件。
从 2.0 开始，ant-design-vue 不再内置 Icon 组件，请应用独立的包 @ant-design/icons-vue
要应用Icon组件须要通过组件的模式援用：
import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';<StarOutlined /><StarFilled /><StarTwoTone twoToneColor="#eb2f96" />批改成组件模式后有个问题就呈现了，如果须要动静渲染怎么办？
例如上面这个例子：
<a-menu-item v-for="item in list" :key="item.name"> <此处如何动静搁置 icon> <span>{{item.name}}</span></a-menu-item>const list = [ { icon: 'UserOutlined', name: 'Home' }， { icon: 'UserOutlined', name: 'Home' }，]antd给提供了一个 createFromIconfontCN 办法，不便开发者调用在 iconfont.cn 上自行治理的图标。
import { createFromIconfontCN } from '@ant-design/icons-vue';const MyIcon = Icon.createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成});new Vue({ el: '#app', template: '<my-icon type="icon-example" />', components: { 'my-icon': MyIcon, },});那如果想应用antd自带的Icon，不思考应用其余插件须要怎么办呢？
咱们能够将@ant-design/icons-vue的所有组件都引入，而后设置一个全局属性存储。
main.js：
import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import Antd from 'ant-design-vue'import * as antIcons from '@ant-design/icons-vue'import 'ant-design-vue/dist/antd.css'const app = createApp(App)// 注册组件Object.keys(antIcons).forEach(key => { app.component(key, antIcons[key])})// 增加到全局app.config.globalProperties.$antIcons = antIconsapp.use(Antd).use(router).use(store).mount('#app')应用：
<template> <a-menu-item v-for="item in list" :key="item.name"> <component :is="$antIcons[item.icon]" /> <span>{{item.name}}</span> </a-menu-item></template>这样就能够动静援用啦，如果大家还有更好的办法，欢送留言。