🐛[BUG] 从服务端请求菜单时 icon 和 access 不生效 #8101

lin-mt · 2021-02-19T00:21:46Z

🐛 bug 描述

https://beta-pro.ant.design/docs/advanced-menu-cn

根据该文档的方式实现从服务端请求菜单，返回的菜单中包含 icon 信息和 accss 信息，icon 显示错误，access 不生效。

icon显示结果：

access无效。

📷 复现步骤

返回的菜单信息：
path: '/system',
name: 'system',
icon: 'setting',
access: 'noPermission',

🏞 期望结果

显示设置的icon，access 生效

💻 复现代码

© 版本信息

Ant Design Pro 版本: 5.0.0-beta.2
umi 版本
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

chenshuai2144 · 2021-02-22T08:35:19Z

icon 只能用 dom，access 必须要触发页面的重新渲染才有用

chengzequn · 2021-03-08T08:28:15Z

你是缺少 @ant-design/icons 图标组件包吧？
安装方法npm install --save @ant-design/icons
我测试
{ path: '/welcome', name: 'welcome', icon: 'setting', component: './Admin', },
是可以用的

chenshuai2144 · 2021-03-09T10:49:34Z

服务器请求回来应该自己处理，是不会走到插件的逻辑的。
权限的请求reload 可以实现，但是菜单不行

sunfuyue · 2021-04-14T07:53:07Z

能不能给个详细的icon使用dom渲染的方法，我尝试了下，没成功

sunfuyue · 2021-04-14T07:54:12Z

icon 只能用 dom，access 必须要触发页面的重新渲染才有用

能否给点儿详细的代码提示，我将menu数据中的icon字段直接替换成 dom，不生效

sunfuyue · 2021-04-14T08:36:36Z

在utils中封装了一个方法；

`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)}`

就能解决了

chenshuai2144 · 2021-04-15T03:37:25Z

你的这个代码会导致 js 大小增加 2m 左右，要慎重

sunfuyue · 2021-04-26T06:44:23Z

请问怎么更优雅的解决呢？

lishaoh · 2021-04-28T06:36:17Z

菜单access怎么解决呢

strongyc · 2021-07-05T13:28:47Z

有啥好的解决办法么，解决服务器请求菜单设置icon图标

chenshuai2144 · 2021-07-13T02:24:10Z

#8101

Zeng-Jun-Wei · 2021-08-20T16:23:18Z

@chenshuai2144 同问该怎么优雅的解决icon

chengzi-code · 2021-08-23T08:21:06Z

用了个死办法，枚举

import {
  BookOutlined,
  LinkOutlined,
  AppstoreOutlined,
  SmileOutlined,
  TableOutlined,
  SoundOutlined,
  CrownOutlined,
} from '@ant-design/icons';

// 利用对象进行图标映射
const iconMapping = {
  AppstoreOutlined: <AppstoreOutlined />,
  SmileOutlined: <SmileOutlined />,
  TableOutlined: <TableOutlined />,
  SoundOutlined: <SoundOutlined />,
  CrownOutlined: <CrownOutlined />
}


   menu: {
      params: initialState,
      // 这里从后端请求动态菜单
      request: async (params, defaultMenuData) => {

        // 这里返回后端的菜单配置  forEach? 把icon字符串 转化为 render图标
        params?.currentUser?.reqMemu.forEach((item: any) => item.icon = iconMapping[item.icon])
        return params?.currentUser?.reqMemu;
      },
    },

Zeng-Jun-Wei · 2021-08-24T02:09:55Z

用了个死办法，枚举

import {
  BookOutlined,
  LinkOutlined,
  AppstoreOutlined,
  SmileOutlined,
  TableOutlined,
  SoundOutlined,
  CrownOutlined,
} from '@ant-design/icons';

// 利用对象进行图标映射
const iconMapping = {
  AppstoreOutlined: <AppstoreOutlined />,
  SmileOutlined: <SmileOutlined />,
  TableOutlined: <TableOutlined />,
  SoundOutlined: <SoundOutlined />,
  CrownOutlined: <CrownOutlined />
}


   menu: {
      params: initialState,
      // 这里从后端请求动态菜单
      request: async (params, defaultMenuData) => {

        // 这里返回后端的菜单配置  forEach? 把icon字符串 转化为 render图标
        params?.currentUser?.reqMemu.forEach((item: any) => item.icon = iconMapping[item.icon])
        return params?.currentUser?.reqMemu;
      },
    },

得枚举很大一部分... @chengzi-code

Loomark · 2021-08-24T08:49:10Z

所以这么问题优雅的解决了吗

kevinsheep · 2021-08-25T02:43:09Z

icon 不显示的问题，可以自定义菜单项渲染方法，并引用自定义的图标库。
看到这个问题被关闭，并标记为Feature Request，不知道以后是否有官方解决方案。
我的方案如下：

// MenuItemRender.tsx，`app.tsx`直接引用即可
import { MenuDataItem } from '@ant-design/pro-layout';
import { createFromIconfontCN } from '@ant-design/icons';
import { Link, useIntl } from 'umi';

let IconFont = createFromIconfontCN({
  // 以下是默认值，也可以按需要指定
  // scriptUrl: defaultSettings.iconfontUrl,
});

const getIcon = (
  icon?: string | React.ReactNode,
  iconPrefixes: string = 'icon-',
): React.ReactNode => {
  if (typeof icon === 'string' && icon !== '') {
    // 可加入多种图标类型的兼容写法，此处省略
    if (icon.startsWith(iconPrefixes)) {
      return <IconFont type={icon} className={icon} />;
    }
  }
  return icon;
};

const MenuItem: React.FC<MenuDataItem> = (menuItemProps) => {
  const { formatMessage } = useIntl();
  const { isUrl: isLink, path, icon, locale } = menuItemProps;
  const localeStr = locale as string; // 和 `formatMessage中` 的 `id` 类型不一致，只好断言一下
  const itemContent = (
    <span className="ant-pro-menu-item">
      {getIcon(icon)}
      <span className="ant-pro-menu-item-title">{formatMessage({ id: localeStr })}</span>
    </span>
  );
  return isLink || !path || location.pathname === path ? (
    itemContent
  ) : (
    <Link to={path}>{itemContent}</Link>
  );
};

export default MenuItem;

还是想用 Ant Design 的图标库？拿去吧：https://www.iconfont.cn/collections/detail?cid=9402

Zeng-Jun-Wei · 2021-08-25T10:24:52Z

 // app.tsx
 export const layout: RunTimeLayoutConfig = ({ initialState }) => {
   return {
       rightContentRender: () => <RightContent />,
       disableContentMargin: false,
       onPageChange: () => {
          const { location } = history;
         // 如果没有登录，重定向到 login
        if (!initialState?.currentUser && location.pathname !== loginPath) {
            history.push(loginPath);
        }
     },
     ...initialState?.settings,
     menuDataRender: () => {
        if (initialState?.menus) {
           return initialState.menus;
        }
        return [];
     },
    menuItemRender: (menuItemProps: MenuDataItem) => {
        return <MenuItemRender {...menuItemProps} />;
    }
   }
 };

// 菜单
 {
    path: '/welcome',
    name: 'welcome',
    icon: 'smile',
    component: './Welcome'
  },
  {
    path: '/admin',
    name: 'admin',
    icon: 'crown',
    access: 'canAdmin',
    component: './Admin',
    routes: [
      {
        path: '/admin/sub-page',
        name: 'sub-page',
        icon: 'smile',
        component: './Welcome'
      },
      {
        component: './404'
      }
    ]
  },
  {
    name: 'list.table-list',
    icon: 'table',
    path: '/list',
    component: './TableList'
  },

@kevinsheep 是写法问题吗？iconPrefixes 的判断也去掉了，菜单加载出来一直是一个路径...

kevinsheep · 2021-08-26T06:10:41Z

@kevinsheep 是写法问题吗？iconPrefixes 的判断也去掉了，菜单加载出来一直是一个路径...

确认一下，icon中的名称，与你的图标库中对应图标命名完全一致（大小写敏感）

Zeng-Jun-Wei · 2021-08-26T08:08:37Z

@kevinsheep 是写法问题吗？iconPrefixes 的判断也去掉了，菜单加载出来一直是一个路径...

确认一下，icon中的名称，与你的图标库中对应图标命名完全一致（大小写敏感）

引用的就是Ant Design 的图标库

kevinsheep · 2021-08-27T05:41:49Z

@kevinsheep 是写法问题吗？iconPrefixes 的判断也去掉了，菜单加载出来一直是一个路径...

确认一下，icon中的名称，与你的图标库中对应图标命名完全一致（大小写敏感）

引用的就是Ant Design 的图标库

~\config\defaultSettings.ts iconfontUrl 怎么设置的？完整点的代码贴一下？

Zeng-Jun-Wei · 2021-08-27T05:53:42Z

defaultSettings

scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' 。
基本上的代码就是楼上贴的了呀，主要是app.tsx里面调用menuItemRender

kevinsheep · 2021-08-29T00:55:22Z

scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' 。

对比你的字库文件和菜单设置中的icon名称，问题应该是你的图标字库文件内容：
那些叫smile，crown的图标，一个都找不到，并且留意到你的图标名称是以icon为前缀的

Zeng-Jun-Wei · 2021-08-30T02:18:53Z

scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' 。

对比你的字库文件和菜单设置中的icon名称，问题应该是你的图标字库文件内容：
那些叫smile，crown的图标，一个都找不到，并且留意到你的图标名称是以icon为前缀的

用的是 Ant Design 的图标库，加上icon- 也不行

kevinsheep · 2021-08-31T07:56:45Z

scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' 。
用的是 Ant Design 的图标库，加上icon- 也不行

你在这个js中搜索一下，有没有一个叫’icon-smile‘的图标名？

Zeng-Jun-Wei · 2021-08-31T08:24:08Z

scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' 。
用的是 Ant Design 的图标库，加上icon- 也不行

你在这个js中搜索一下，有没有一个叫’icon-smile‘的图标名？

我以为这个链接时 antd 的图标库...里面没有smile的图标

junyunlife · 2021-09-16T02:08:24Z

在utils中封装了一个方法；

`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)}`

就能解决了

scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' 。
用的是 Ant Design 的图标库，加上icon- 也不行

你在这个js中搜索一下，有没有一个叫’icon-smile‘的图标名？

我以为这个链接时 antd 的图标库...里面没有smile的图标

Zeng-Jun-Wei · 2021-09-16T09:52:34Z

在utils中封装了一个方法；

`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)}`

就能解决了

scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' 。
用的是 Ant Design 的图标库，加上icon- 也不行

你在这个js中搜索一下，有没有一个叫’icon-smile‘的图标名？

我以为这个链接时 antd 的图标库...里面没有smile的图标

这个子菜单的icon好像渲染不出来

xiangming25 · 2021-10-19T02:56:57Z

从服务器加载 menu 并且使用 icon

这里有 ant-design-pro 的使用示例

Zeng-Jun-Wei · 2021-10-19T03:17:22Z

从服务器加载 menu 并且使用 icon

这里有 ant-design-pro 的使用示例

这是写死的icon

fuyue-sun · 2021-10-21T05:54:07Z

这么久了还有挖坟的

yunshangrourou · 2022-02-23T17:31:23Z

不改代码，直接在nginx里面加一行rewrite规则即可：
location ~* ^/(.*)/logo\.svg$ { rewrite ^/(.*)/(logo\.svg)$ https://a.com/logo.svg permanent; }

kddloong · 2022-03-24T01:47:55Z

动态菜单的渲染 subMenuItemRender 和 menuItemRender 两个渲染API要配合使用。menuItemRender可以参考 #8101 (comment)

LIFANGTIAN · 2022-04-16T19:48:24Z

您好请问解决了吗

chenjh-8 · 2022-04-30T12:34:11Z

icon 不显示的问题，可以自定义菜单项渲染方法，并引用自定义的图标库。看到这个问题被关闭，并标记为Feature Request，不知道以后是否有官方解决方案。我的方案如下：

// MenuItemRender.tsx，`app.tsx`直接引用即可
import { MenuDataItem } from '@ant-design/pro-layout';
import { createFromIconfontCN } from '@ant-design/icons';
import { Link, useIntl } from 'umi';

let IconFont = createFromIconfontCN({
  // 以下是默认值，也可以按需要指定
  // scriptUrl: defaultSettings.iconfontUrl,
});

const getIcon = (
  icon?: string | React.ReactNode,
  iconPrefixes: string = 'icon-',
): React.ReactNode => {
  if (typeof icon === 'string' && icon !== '') {
    // 可加入多种图标类型的兼容写法，此处省略
    if (icon.startsWith(iconPrefixes)) {
      return <IconFont type={icon} className={icon} />;
    }
  }
  return icon;
};

const MenuItem: React.FC<MenuDataItem> = (menuItemProps) => {
  const { formatMessage } = useIntl();
  const { isUrl: isLink, path, icon, locale } = menuItemProps;
  const localeStr = locale as string; // 和 `formatMessage中` 的 `id` 类型不一致，只好断言一下
  const itemContent = (
    <span className="ant-pro-menu-item">
      {getIcon(icon)}
      <span className="ant-pro-menu-item-title">{formatMessage({ id: localeStr })}</span>
    </span>
  );
  return isLink || !path || location.pathname === path ? (
    itemContent
  ) : (
    <Link to={path}>{itemContent}</Link>
  );
};

export default MenuItem;

还是想用 Ant Design 的图标库？拿去吧：https://www.iconfont.cn/collections/detail?cid=9402

chenjh-8 · 2022-04-30T12:34:13Z

icon 不显示的问题，可以自定义菜单项渲染方法，并引用自定义的图标库。看到这个问题被关闭，并标记为Feature Request，不知道以后是否有官方解决方案。我的方案如下：

// MenuItemRender.tsx，`app.tsx`直接引用即可
import { MenuDataItem } from '@ant-design/pro-layout';
import { createFromIconfontCN } from '@ant-design/icons';
import { Link, useIntl } from 'umi';

let IconFont = createFromIconfontCN({
  // 以下是默认值，也可以按需要指定
  // scriptUrl: defaultSettings.iconfontUrl,
});

const getIcon = (
  icon?: string | React.ReactNode,
  iconPrefixes: string = 'icon-',
): React.ReactNode => {
  if (typeof icon === 'string' && icon !== '') {
    // 可加入多种图标类型的兼容写法，此处省略
    if (icon.startsWith(iconPrefixes)) {
      return <IconFont type={icon} className={icon} />;
    }
  }
  return icon;
};

const MenuItem: React.FC<MenuDataItem> = (menuItemProps) => {
  const { formatMessage } = useIntl();
  const { isUrl: isLink, path, icon, locale } = menuItemProps;
  const localeStr = locale as string; // 和 `formatMessage中` 的 `id` 类型不一致，只好断言一下
  const itemContent = (
    <span className="ant-pro-menu-item">
      {getIcon(icon)}
      <span className="ant-pro-menu-item-title">{formatMessage({ id: localeStr })}</span>
    </span>
  );
  return isLink || !path || location.pathname === path ? (
    itemContent
  ) : (
    <Link to={path}>{itemContent}</Link>
  );
};

export default MenuItem;

还是想用 Ant Design 的图标库？拿去吧：https://www.iconfont.cn/collections/detail?cid=9402

1806150981 · 2022-05-17T14:21:37Z

解决

Mankvis · 2022-08-19T01:43:06Z

解决

目前尝试了这种写法，导致控制台报出警告：

xjchenhao · 2023-02-10T08:36:51Z

从服务器加载 menu 并且使用 icon

我也是这个思路

击掌(✧∇✧)╯╰(✧∇✧)̣

kasnti · 2023-08-07T16:56:48Z

根据图标字符串创建图标元素，除了使用上文提到的这个方法：
item.icon = React.createElement(allIcons[fixIconName] || allIcons[icon]);
也可以使用
<Icon component={allIcons['fixIconName']} /> （其中Icon标签来源：import Icon from '@ant-design/icons';）
不知道哪个性能好一些？

coderzym · 2023-11-23T03:38:32Z

解决

完美解决我的问题，谢谢兄弟

shg1031 · 2024-01-24T07:23:21Z

icon 只能用 dom，access 必须要触发页面的重新渲染才有用

如何重新渲染呢！贴个示例悄悄呢，大神

chenshuai2144 added the 🏆 Feature Request label Feb 22, 2021

chenshuai2144 closed this as completed Apr 15, 2021

aFUZHOU mentioned this issue Jul 5, 2021

V5版本动态获取菜单icon不能正确显示。 #8671

Closed

chenshuai2144 mentioned this issue Jul 13, 2021

v5版本菜单的高级用法 icon 没有生效，带参数的路由404，重定向全部失效了，有知道怎么改的吗？ #8695

Closed

chenshuai2144 mentioned this issue Jul 20, 2021

V5菜单，按文档取出来后，icon怎么解析下 #8774

Closed

This was referenced Jul 27, 2021

👑 菜单组件不支持图标显示（子菜单） ant-design/pro-components#3307

Closed

🐛[BUG] 动态菜单图标配置 #8860

Closed

chenshuai2144 mentioned this issue Sep 22, 2021

👑 [需求]如果从后端取数据而生成的菜单中的icon能自动转为图标就更好了。现在需要loop一次转为对象才可以显示图标。 #8301

Closed

🐛[BUG] 从服务端请求菜单时 icon 和 access 不生效 #8101

🐛[BUG] 从服务端请求菜单时 icon 和 access 不生效 #8101

Comments

lin-mt commented Feb 19, 2021

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

© 版本信息

🚑 其他信息

chenshuai2144 commented Feb 22, 2021

chengzequn commented Mar 8, 2021 • edited Loading

chenshuai2144 commented Mar 9, 2021

sunfuyue commented Apr 14, 2021

sunfuyue commented Apr 14, 2021

sunfuyue commented Apr 14, 2021 • edited by chenshuai2144 Loading

chenshuai2144 commented Apr 15, 2021

sunfuyue commented Apr 26, 2021

lishaoh commented Apr 28, 2021

strongyc commented Jul 5, 2021

chenshuai2144 commented Jul 13, 2021

Zeng-Jun-Wei commented Aug 20, 2021

chengzi-code commented Aug 23, 2021

Zeng-Jun-Wei commented Aug 24, 2021

Loomark commented Aug 24, 2021

kevinsheep commented Aug 25, 2021

Zeng-Jun-Wei commented Aug 25, 2021 • edited Loading

kevinsheep commented Aug 26, 2021 • edited Loading

Zeng-Jun-Wei commented Aug 26, 2021

kevinsheep commented Aug 27, 2021

Zeng-Jun-Wei commented Aug 27, 2021

kevinsheep commented Aug 29, 2021

Zeng-Jun-Wei commented Aug 30, 2021 • edited Loading

kevinsheep commented Aug 31, 2021

Zeng-Jun-Wei commented Aug 31, 2021

junyunlife commented Sep 16, 2021

Zeng-Jun-Wei commented Sep 16, 2021

xiangming25 commented Oct 19, 2021

Zeng-Jun-Wei commented Oct 19, 2021

fuyue-sun commented Oct 21, 2021

yunshangrourou commented Feb 23, 2022 • edited Loading

kddloong commented Mar 24, 2022

LIFANGTIAN commented Apr 16, 2022

chenjh-8 commented Apr 30, 2022

chenjh-8 commented Apr 30, 2022

1806150981 commented May 17, 2022

Mankvis commented Aug 19, 2022

xjchenhao commented Feb 10, 2023

kasnti commented Aug 7, 2023

coderzym commented Nov 23, 2023

shg1031 commented Jan 24, 2024

chengzequn commented Mar 8, 2021 •

edited

Loading

sunfuyue commented Apr 14, 2021 •

edited by chenshuai2144

Loading

Zeng-Jun-Wei commented Aug 25, 2021 •

edited

Loading

kevinsheep commented Aug 26, 2021 •

edited

Loading

Zeng-Jun-Wei commented Aug 30, 2021 •

edited

Loading

yunshangrourou commented Feb 23, 2022 •

edited

Loading