ant-design-vue2.x中的图标组件动态渲染

vue3.0时代已经到来，各个UI组件库陆续支持vue3，ant-design-vue也提出了ant-design-vue2.xforvue3版本中，很多组件也进行了相应的调整，比如图标组件。从2.0开始，ant-design-vue不再内置Icon组件，需要使用单独的包@ant-design/icons-vue。使用Icon组件需要以组件的形式引用：import{StarOutlined,StarFilled,StarTwoTone}from'@ant-design/icons-vue';修改成组件形式后，出现问题。如果需要动态渲染怎么办？例如下面的例子：{{item.name}}constlist=[{icon:'UserOutlined',name:'Home'},{icon:'UserOutlined',name:'Home'},]antd提供了createFromIconfontCN方法，方便开发者调用iconfont.cn上自己管理的图标。从'@ant-design/icons-vue'导入{createFromIconfontCN}；constMyIcon=Icon.createFromIconfontCN({scriptUrl:'//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',//在iconfont.cn上生成});newVue({el:'#app',template:'',components:{'my-icon':MyIcon,},});那么如果想使用antd自带的Icon而不考虑其他插件怎么办呢？我们可以导入@ant-design/icons-vue的所有组件，然后设置一个全局属性存储。main.js：从'vue'导入{createApp}从'./App.vue'导入应用程序从'./router'导入路由器从'./store'导入商店从'ant-design-vue'导入Antd*asantIconsfrom'@ant-design/icons-vue'import'ant-design-vue/dist/antd.css'constapp=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')使用：这个可以动态引用。如果你有更好的方法，欢迎留言。