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

前言

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

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

<AppstoreOutlined />
<MessageOutlined />
1
2
3
4

那么这样就出现了一种问题：如何动态渲染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')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

第二步：在组件中使用：

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

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

 //存储导航侧边栏信息
    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",
      },
    ]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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