动态引入 antDesign 的图标，并注册为组件

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])
})

# 这样可以将 ts 的类型校验 干过去
# 首先通过 typeof 操作符获取 Icons 变量的类型，然后通过 keyof 操作符获取该类型的所有键
Object.keys(antIcons).forEach((key: string) => {
  app.component(key, antIcons[key as keyof typeof antIcons])
})

3、在别的组件中使用

<component :is="item.meta.icon"/>  // 最下面有<components :is="xxx">（vue动态渲染组件）的解释
这个 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,
    }
  }
]

Vue动态渲染组件

	<component :is="item.meta.icon" />  是什么意思？
	
	`<component :is="item.meta.icon" />` 是 Vue 中的动态组件语法。
	
	通过 `:is` 属性将动态组件的名称设置为 `item.meta.icon`，
	这样 Vue 将会根据 `item.meta.icon` 的值来动态地渲染对应的图标组件。
	
	假设 `item.meta.icon` 的值为 `SettingOutlined`，
	那么 `<component :is="item.meta.icon" />` 将会渲染 `<SettingOutlined />` 组件。
	
	这种方式可以让你在运行时动态地选择要渲染的组件，并且非常适合在循环中使用。