Umi: 路由配置menu时，icon不起作用。

Created on 7 Mar 2020 · 16Comments · Source: umijs/umi

What happens?

如果使用的是已经迁移到antd@4的pro-layout，此时使用的是图标组件而非Icon组件，这时候如果icon传入字符的话，是无法显示图标的。除非使用@ant-design/compatible包。

当我直接使用组件的时候
config/routes.tsx

{
    path: '/workbench/dashboard',
    component: '@/pages/dashboard',
    menu: {
      name: '概覽',
      icon: <DashboardOutlined />,
    },
},

然后看了一下.umi下的routes

{
    "path": "/workbench/dashboard",
    "component": require('@/pages/dashboard').default,
    "menu": {
        "name": "概覽",
        "icon": {
            "type": {},
            "key": null,
            "ref": null,
            "props": {},
            "_owner": null,
            "_store": {}
        }
    },
    "exact": true
},

应该是umi在编译config时没编译到组件。

Most helpful comment

约定式路由配置的 icon 不能被解析出来

EmiyaYang on 18 Jun 2020

👍6

All 16 comments

https://github.com/umijs/umi-plugin-antd-icon-config

这个是获取设置在routeItem.icon中的。umi@3的话，是设置在routeItem.menu.icon中的。

hzgotb on 9 Mar 2020

👍1

看了一下源码，umi的route只把component和wrapper进行require。
umi@3中，pro-layout如果使用 @ant-design/icon@4 的话，在没有插件下，必须在menu中的icon直接写成ReactNode。
如果要以插件形式的话，可能需要修改routesToJSON相关的部分。

暂时就研究了这些。

hzgotb on 9 Mar 2020

你可以运行配置添加 export const layout = { menuItemRender: ( menuItemRender)=> {
return (ReactNode)
}} 自定义渲染菜单项

felhz on 11 Mar 2020

你可以运行配置添加 export const layout = { menuItemRender: ( menuItemRender)=> {
return (ReactNode)
}} 自定义渲染菜单项

看了一下props。還得重新去匹配route再生成ReactNode。太麻煩了。

hzgotb on 11 Mar 2020

现在的办法只能是路由和菜单分两套配置来写。.umi 的 routes 就是个黑盒

gouflv on 8 Apr 2020

如果是 umi@3 的话，routes这么配置：

import { defineConfig } from "umi";

export default defineConfig({
  antd: {
    dark: true,
  },
  layout:{
    name: 'Ant Design', 
  },
  routes: [{
    path: '/welcome',
    component: 'welcome.tsx',
    menu: {
      name: '欢迎',
      icon: 'github',
    },
    layout:{
      hideNav: true,
    },
    access: 'canRead',
  }]
});

注意里面的 icon 配置，使用的是 antd@4 的图标组件，把图标组件 <GithubOutlined /> 名字小写，然后去掉 outlined，剩下的 github 就可以用在 menu 的配置里了

效果如下：

Screen Shot 2020-04-08 at 11 23 49

leftstick on 8 Apr 2020

👍1

如果是 umi@3 的话，routes这么配置：
import { defineConfig } from "umi";

export default defineConfig({
  antd: {
    dark: true,
  },
  layout:{
    name: 'Ant Design', 
  },
  routes: [{
    path: '/welcome',
    component: 'welcome.tsx',
    menu: {
      name: '欢迎',
      icon: 'github',
    },
    layout:{
      hideNav: true,
    },
    access: 'canRead',
  }]
});
注意里面的 icon 配置，使用的是 antd@4 的图标组件，把图标组件 <GithubOutlined /> 名字小写，然后去掉 outlined，剩下的 github 就可以用在 menu 的配置里了

效果如下：