antdesign Pro of vue 自定义菜单栏图标

标题 Pro of vue 左侧菜单栏自定义图标，导航菜单图标引入阿里巴巴矢量库 原因

左侧菜单栏的生成有两种方式，一是通过路由，二是可以后端返回的（在原生项目中是模拟数据）。

而后端返回的模拟数据中，引入是没有效果的。通过路由生成的才可以自定义

一. 解决办法一

1.将菜单生成改为通过路由生成的模式

在src/store/index.js中有一行代码将其解禁

  import permission from './modules/permission'

2、引入svg文件

1、src/core/icons.js引入文件后暴露

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

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

meta: { title: '企业微信',icon: enterpriseWechat, permission: ['dashboard'] }, 

二、解决办法二

1.全局引入阿里巴巴矢量库

引入

// 全局引入iconfont
import { Icon } from 'ant-design-vue'const IconFont = Icon.createFromIconfontCN({scriptUrl: '//at.alicdn.com/t/c/font_2289567_oxfny4lkrzp.js',
})
// 全局注册 IconFont 组件
Vue.component('IconFont', IconFont)

2.找到管理端（管理端是相对于用户端）src/下控制icon图标的组件

加上去之后我们可以看到开发配置中 找到需要配置的菜单点击编辑，就可以看到我们刚添加的自定义的图标

但此时图标还是无法显示出来

**3、最后，**我们需要在下的index.html中加入这些，注意是

font-face是在这里

其中 的值是在中所要用的图标的码