1、需要安装 @ant-design/icons-vue 图标组件包
npm install --save @ant-design/icons-vue
2、引入antDesign的图标库
在main.js中
import * as antIcons from '@ant-design/icons-vue'// 将antDesign图标库的所有图标,每个都注册成组件
Object.keys(antIcons).forEach(key => {app.component(key, antIcons[key])
})
3、在别的组件中使用
<component :is="item.meta.icon"/>
这个 item.meta.icon 就是 meta中的icon,
这就看你怎么用了,这里随意了就export const asyncRouterMap = [{...children: [{path: '/systemOverview/dashboard/DashBoardIndex',component: () => import('@/views/systemOverview/dashboard/DashBoardIndex.vue'),name: 'dashboard',meta: {title: '仪表盘',icon: "UserOutlined",keepAlive: true,}},{path: '/systemOverview/dataCenter/dataCenter',component: () => import('@/views/systemOverview/dataCenter/dataCenter.vue'),name: 'dataCenter',meta: {title: '数据中心',icon: 'VideoCameraOutlined',keepAlive: true,}},]},{path: '/progressBar/ProgressBarIndex',component: () => import('@/views/progressBar/ProgressBarIndex.vue'),name: 'progressBar',meta: {title: '进度条',icon: 'MenuUnfoldOutlined',keepAlive: true,}},{path: '/virtual/VirtualIndex',component: () => import('@/views/virtual/VirtualIndex.vue'),name: 'virtual',meta: {title: '虚拟列表',icon: 'MenuFoldOutlined',keepAlive: true,}}
]