🧐[问题 | question] 关于V5动态菜单图标的优雅解决问题

[Mankvis]

🧐 问题描述 | Problem description

目前使用了动态菜单，发现动态菜单图标无法正常加载，经过查阅资料，找到以下解决问题的办法

💻 示例代码 | Sample code

import React from 'react';
import { MenuDataItem } from '@ant-design/pro-layout';
import * as allIcons from '@ant-design/icons';

// FIX从接口获取菜单时icon为string类型
const fixMenuItemIcon = (menus: MenuDataItem[], iconType = 'Outlined'): MenuDataItem[] => {
menus.forEach((item) => {
const { icon, children } = item;
if (typeof icon === 'string') {
let fixIconName = icon.slice(0, 1).toLocaleUpperCase() + icon.slice(1) + iconType;
item.icon = React.createElement(allIcons[fixIconName] || allIcons[icon]);
}
children && children.length > 0 ? (item.children = fixMenuItemIcon(children)) : null;
});
return menus;
};

export default fixMenuItemIcon;

在layout组件中直接调用
menuDataRender={() => fixMenuItemIcon(menus.menusData)}

但是使用了这个办法之后，会出现一下警告，大概意思就是说引入包的方式有问题

OS:

Node：

浏览器 | browser：

[github-actions]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [🧐[问题 | question] #10102][85%]
• [🧐[问题 | question] #10055][85%]
• [🧐[问题 | question] #9981][85%]
• [🧐[问题 | question] umi4使用initialStateConfig会报错 #10017][79%]
• [#10099][78%]
• [🧐[问题 | question] 请问如何自定义多tabs #10110][77%]
• [🧐[问题 | question]🐛 [BUG]css里面background引入assets的图片做背景图不显示 #10097][77%]
• [🧐[问题 | question] router的access函数生效了返回了false,但菜单栏还是有它，也能访问 #10089][77%]
• [🧐[问题 | question] 如何在renderExtraTable中新增與搜索相關的資料 #10067][77%]
• [🧐[问题 | question] protable里的时间段类型的值处理处理优雅点？ #10100][76%]
• [🧐[问题 | question] 如何在自定义的layout中获取当前路由菜单名称,路径,组件，有什么方法或者钩子函数？ #10082][76%]
• [🧐[问题 | question] 为什么我无法修改内容的字体颜色 #10044][76%]
• [🧐[问题 | question] 使用默认布局时，菜单的样式如何自定义 #10043][76%]
• [🧐[问题 | question] favicon.ico在配置publicPath之后，打包路径不正确 #10027][76%]
• [🧐[问题 | question] 当资源文件正在服务器上被客户使用的时候，我发布了一个新包。跳转页面资源文件404。 #10012][76%]
• [🧐[问题 | question] prov6的layout样式怎么和pro-layout组件的样式不一样 #9977][76%]
• [🧐[问题 | question] 一个不太明白作用的空节点和如何设置 #10134][75%]
• [🧐[问题 | question] 官网的预览项目中路由和菜单与预期不符 #10114][75%]
• [🧐[问题 | question] 登录成功后出现弹窗验证如何做 #9966][75%]
• [🧐[问题 | question]如何修改默认样式之后兼容明暗模式 #10045][64%]
• [🧐[问题 | question] PageContainer 默认不显示面包屑和标题该怎么处理？ #10127][63%]
• [🧐[问题 | question] getInitialState 刷新页面重复执行 #10042][63%]
• [🧐[问题 | question] access配置 这个在哪里配置呢？ #10039][63%]
• [🧐[问题 | question] 升级到umi4, 在document.ejs引入百度地图的script不起作用 #10010][63%]
• [🧐[问题 | question]请问下怎么配置websocket代理 #10009][63%]
• [#9962][63%]
• [🧐[问题 | question]不知道为什么我登录按钮需要点击两次才能登录 #10107][62%]
• [🧐[问题 | question]v5.2.0版本如何修改自定义layout #10084][62%]
• [🧐[问题 | question]Protable的横向滚动条如何浮动在页面底部? #10142][61%]
• [🧐[问题 | question]proxy代理无法获得后端数据，总是返回html页面 #10153][60%]
• [🧐[问题 | question]如何实现页面跳转，并且把前一个页面的部分参数带到新页面中？ #10074][60%]
• [🧐[问题 | question]chrome浏览器切换回来，表格会默认请求一次，如何取消？ #10072][60%]
• [🧐[问题 | question]在app.tsx中配置菜单项的情况下，如何实现搜索菜单功能 #10053][60%]
• [🧐[问题 | question]layout设置为mix，菜单动态加载布局样式混乱 #10048][60%]
• [🧐[问题 | question]settingDrawer如何自定义配置右边侧边栏的各种菜单选项 #10126][59%]
• [🧐[问题 | question]服务部署在ubuntu的机器上。windows机器谷歌浏览器输入地址访问一直报错 #10143][57%]
• [🧐[问题 | ant-design-pro ？]  #9994][57%]
• [🧐[问题 | v4.5.0版本登录values参数为啥报这个？ #10006][56%]
• [默认安装都是typescript版本🧐[问题 | question] #9998][56%]
• [🧐[问题 | question]配置通用布局文件layout获取的props中为空对象配置通用布局文件layout获取的props中为空对象 #9991][56%]
• [🧐[问题 | question]umi4版本在配置base和publicPath后，history.location和useLocation()返回的pathname不同 #9968][56%]
• [🧐[问题 | v4.5.0版本在routes配置的子级路由怎么可以让它不显示在菜单栏上？] #10022][55%]
• [🧐[老项目从umi2升级umi3运行报错 | question] #10019][55%]
• [🧐[问题 | v4.5.0版本路由routes.ts配置重定向后为何子路由页面无法显示，不配置重定向就可以？] #10018][55%]
• [🧐[问题 | 这种ts报错怎么从根源解决？？？其他页面也会有！！！求助！！！] #10029][54%]
• [🧐[问题 | 升级v6后统一错误处理不弹出错误提示 #10008][54%]
• [🧐[问题 | 图片上传的时候为什么没有拿到服务端返回的response？？？？？]在线等 急 #10035][53%]

[q269384828]

你这样引入所有的图标太大了.... 还不如手写一个icons.tsx 文件

[Mankvis]

你这样引入所有的图标太大了.... 还不如手写一个icons.tsx 文件

是有增大项目文件的问题，不过已经解决了这个警告，但是现在动态加载菜单的话二级菜单的图标不会显示，还在寻找解决办法

[chenshuai2144]

在动态加载菜单的话二级菜单的图标不会显示

这个是专门的，为了防止icon太多眼花缭乱

[HalcyonDaysssss]

你这样引入所有的图标太大了....还不如手写一个icons.tsx文件

是有较大项目文件的问题，不过已经解决了这个警告，但是现在在动态加载菜单的二级菜单的图标不会显示，还在寻找解决办法

怎么解决的呢大佬