Ant Design Vue3.x中动态渲染icon图标

前言

随着vue3成为默认版本，越来越多的开发者选择vue3进行项目的开发，UI组件库也对Vue3进行了适配，Ant Design Vue3.x升级后，icon图标的使用方式有了如下的改变：
要使用icon需要先引入后在以组件的形式使用：

import { AppstoreOutlined, MessageOutlined, CalendarOutlined} from '@ant-design/icons-vue';<AppstoreOutlined />
<MessageOutlined />

那么这样就出现了一种问题：如何动态渲染icon图标呢，特别是在我们项目中的侧边导航栏应用上。

解决办法

第一步：在main.js中将@ant-design/icons-vue的所有组件都引入，然后设置一个全局属性存储。

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
//引入CSS初始化文件
import './assets/css/base.css'
//ant design组件 全局注册
import Antd from 'ant-design-vue';
//导入组件库
import * as antIcons from '@ant-design/icons-vue'
import './assets/css/myTheme.less'// 注册组件
Object.keys(antIcons).forEach(key => {app.component(key, antIcons[key])
})
// 添加到全局
app.config.globalProperties.$antIcons = antIcons
app.use(Antd)
//app挂载
app.mount('#app')

第二步：在组件中使用：

<component :is="$antIcons[item.icon]" />

楼主的动态存储的数据为：

 //存储导航侧边栏信息const asideMenu = reactive([{title: "首页",path: "/main",name: "Main",key: 1,icon: "AppstoreOutlined",},{title: "我的一天",path: "/day",name: "Day",key: 2,icon: "CarryOutOutlined",},{title: "任务清单",path: "/task",name: "Task",key: 3,icon: "MessageOutlined",},{title: "倒数日",path: "/date",name: "Date",key: 4,icon: "CalendarOutlined",},{title: "备忘录",path: "/memorandum",name: "Memorandum",key: 5,icon: "HighlightOutlined",},{title: "设置",path: "/setting",name: "Setting",key: 6,icon: "SettingOutlined",},]);

本文到此结束啦，喜欢的小伙伴可以点个赞关注下。
其实楼主还尝试过其他办法，例如v-html等其他办法，但是都没有这个好用。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！