Ant Design Pro of Vue 左侧菜单栏自定义图标_ant-design-vue menu自定义图标

前言

今天尝试自定图标，但是引入后发现该显示图标的地方是空白

原因

左侧菜单栏的生成有两个，一个是通过路由，一个是可以后端返回的（在原生项目中是模拟数据）。
而后端返回的模拟数据中，引入是没有效果的。通过路由生成的才可以自定义。

操作

1、将菜单生成改为通过路由生成的模式
在src/store/index.js中有一行代码将其解禁

import permission from './modules/permission'
1

2、引入svg文件
1、src/coreicons.js引入文件后暴露

/**
 * Custom icon list
 * All icons are loaded here for easy management
 * @see https://vue.ant.design/components/icon/#Custom-Font-Icon
 *
 * 自定义图标加载表
 * 所有图标均从这里加载，方便管理
 */
import nanren from '../assets/svg/nanren.svg?inline'
import bxAnaalyse from '@/assets/icons/bx-analyse.svg?inline' // path to your '*.svg?inline' file.

export { bxAnaalyse, nanren }
1
2
3
4
5
6
7
8
9
10
11
12

3、最后在router.config.js文件中引用

import { bxAnaalyse, nanren } from '@/core/icons'

meta: { title: 'menu.dashboard', keepAlive: true, icon: bxAnaalyse, permission: ['dashboard'] },
1
2
3