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

时间:2024-03-23 07:16:13

第一步:

去阿里巴巴矢量库生成项目图标。复制以下代码:
ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法

第二步:

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

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

第三步:

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

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

第四步:

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

ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法
点击保存,就可以支持icon-font了。需要注意的是后台返回的菜单meta.icon中字段要以"icon-"开头,阿里巴巴矢量库中图标也要已’icon-'开头(默认也是以icon-开头的)。与上图代码相对应。如下:

ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法
然后就可以了,不信你试一下。