解决react antd design pro 二级图标不显示问题（v4版本）
解决react antd design pro 二级图标不显示问题（v4版本）
1、问题描述
在项目路由配置中，对各个子路由配置icon属性，但是项目实际运行中并不能显示
{path: '/system',name: 'system',icon: 'icon-xitong',routes: [{path: '/system/user',name: 'user',icon: 'smile',component: './system/index',// authority: ['admin'],}]
}
效果如下图所示
2 解决思路及编码
2.1 选择iconfont资源
个人在开发中选择阿里的iconfont，作为路由的icon，[https://www.iconfont.cn/](https://www.iconfont.cn/)
2.2 创建图标组件
以下配置依据个人开发情况酌情修改
在项目工程目录components下创建 SvgIcon文件夹，并创建index.js 项目文件，文件内容如下
同时为清晰参考，提供该目录
2.3 重写 BasicLayout.jsx 中 方法
在 https://procomponents.ant.design/components/layout#prolayout 文档中提供了
menuItemRender 自定义菜单项的 render 方法
subMenuItemRender 自定义拥有子菜单菜单项的 render 方法
<ProLayoutmenuItemRender={(menuItemProps, defaultDom) => {return (<Link to={menuItemProps.path ? menuItemProps.path : '#'}>{menuItemProps.icon && < SvgIcon type={menuItemProps.icon.toString()} />} {menuItemProps.name}</Link>)}}subMenuItemRender={(subMenuITem) => {return (<><span className="ant-pro-menu-item"><span role="img" className="anticon">{subMenuITem.icon && <SvgIcon type={subMenuITem.icon.toString()} />}</span><span>{subMenuITem.name}</span></span></>)}}/>
2.4 完成配置，刷新页面即可
以上亲测有效，希望帮助到各位。
pro 坑太深，也希望社区资源原来越丰富。
解决react antd design pro 二级图标不显示问题（v4版本）相关推荐
- React Ant design pro 访问服务器接口，获取数据显示
React Ant design pro 访问服务器接口 一.前两天更新了Ant design pro环境搭建,需要了解的小伙伴可以看一下之前的内容,还有react基础教程噢. 二.框架搭建完后,一般 ...
- react ant design pro typescript springboot activiti权限、工作流框架
是什么? 使用springboot,activiti,mybatis,react,ant design pro,typescript 开发的后台管理系统(包含权限管理.工作流等功能),真正前后端分离的 ...
- vue上线后图片不显示_解决Vue打包后访问图片/图标不显示的问题
大家可否遇到过 npm run build打包后,项目在线上运行时,资源文件 (图片.图标)不显示 的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后 ...
- ant design pro 菜单图标引入问题 iconfontUrl inconfont图标本地
ant design pro 菜单栏使用图标 官网使用inconfont图标,推荐使用inconfont官网的线上地址 查看地址:https://pro.ant.design/zh-CN/docs/n ...
- React + Ant Design Pro项目实现keep-alive页签
背景 PC端管理系统,采用 ant design pro 方案,它是阿里的一个管理系统框架,技术栈是react. 相比vue,react一个先天不足是不支持 keep-alive,所以管理系统中的多页 ...
- antd design pro菜单打开http链接
pro的动态菜单之前有写过,这里就不重复了.现在遇到的问题是点击菜单的某一个跳转的是http链接,不是路由,将http放在菜单时进行跳转时会跳转到当前IP地址后面加/+http的地址,相当于http前 ...
- react antd design columns 配置解析
只上干货,其中有些可以参考官方文档 import { history } from 'umi' const columns: any[] = [{title: '订单号',//列头显示的文字fixed ...
- 解决 element ui 本地使用 引入 图标不显示 .ttf和.woff 报错问题
解决 element ui 引入在线地址更换为本地地址后 .ttf和.woff 报错问题 原因 因为文件内缺少两个文件 根据控制台提示 发现少了.ttf和.woff两个文件 1)element-ico ...
- react+antd 引入moment之后，DatePicker显示出现英文
解决方案: 在js前加上以下3句. import moment from 'moment';import 'moment/locale/zh-cn';moment.locale('zh-cn'); 最 ...
- 解决 VMware Workstation 14 Pro 安装 Mac 10.12 及以上版本的分辨率显示异常
前几天在VM14里安装了MAC系统,但是因为经验不足,一直无法调整MAC的分辨率,备受折磨,在度娘上扒了几天无果,如:安装 VMsvga2 ,重装 VMware Tools 等,均无效果,后来无意发现 ...
最新文章
- 开元弧焊机器人编程_焊接机器人的技术现状和展望
- 请列举一下在jvm中哪些对象可以当作root对象？
- 消息队列中点对点与发布订阅区别
- 【转】DICOM的常用Tag分类和说明
- 植物大战僵尸不能保存进度
- [转]ClassPath是什么
- mysql tb级数据库_4.5万字手把手教你实现MySQL TB级数据存储！！
- Div 在页面中居中
- Python内置函数(56)——set
- matlab18a安装步骤,MATLAB R2018a图文安装教程
- MaxScript脚本
- 纪念第一次2019河南省第十二届ACM大赛之旅
- word文档在程序未响应的情况下强行关闭未保存怎么恢复？
- 包名前面的org.apache和com.是什么意思
- 概率论(三)-多维随机变量及其分布：n维随机变量、概率分布函数F(x1,x2,..xn)、联合分布律、联合概率密度、边缘分布律、边缘概率密度、条件分布律、条件概率密度、β函数、Γ函数、max{X,Y}
- drools 6.5 决策表使用
- iOS报错：108 duplicate symbols for architecture arm64
- 【后端教程】京东API网关实践之路！
- Could not set property ‘xxx‘ of ‘class ‘xxx‘ with value ‘xxx‘,Cause: java.lang.IllegalArgumentExcept
- MATLAB 系统仿真与建模（一）—— 连续线性系统的数学模型