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

作者：盐析白兔 | 2024-02-19 06:37:19

踩

antd pro 添加阿里矢量图标

去阿里巴巴矢量库生成项目图标。复制以下代码:
在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

在此事例中引入iconfont组件。

 components: {
    IconFont
  },
1
2
3

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

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

在这里插入图片描述
然后就可以了，不信你试一下。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/113150