ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法

第一步:

去阿里巴巴矢量库生成项目图标。复制以下代码:

第二步:

打开项目组件中Menu/menu.js.

第三步:

引入Icon组件并添加以下代码，scriptUrl为你自己项目生成的url.

第四步：

在此事例中引入iconfont组件。

 components: {
    IconFont
  },

第五步:

找到renderIcon函数，新增以下代码:

点击保存，就可以支持icon-font了。需要注意的是后台返回的菜单meta.icon中字段要以"icon-"开头，阿里巴巴矢量库中图标也要已’icon-'开头(默认也是以icon-开头的)。与上图代码相对应。如下：

然后就可以了，不信你试一下。