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",
      },
    ]);