解決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版本）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。