react+umi 使用本地图片做菜单icon

1.看文档有这么一段const IconMap = {smile: <SmileOutlined />,heart: <HeartOutlined />,};const defaultMenus = [{path: '/',name: 'welcome',icon: 'smile',children: [{path: '/welcome',name: 'one',

我是无敌的无敌的小可爱

2544人浏览 · 2021-04-01 11:27:28

我是无敌的无敌的小可爱 · 2021-04-01 11:27:28 发布

1.看文档有这么一段

const IconMap = {
  smile: <SmileOutlined />,
  heart: <HeartOutlined />,
};
const defaultMenus = [
  {
    path: '/',
    name: 'welcome',
    icon: 'smile',
    children: [
      {
        path: '/welcome',
        name: 'one',
        icon: 'smile',
        children: [
          {
            path: '/welcome/welcome',
            name: 'two',
            icon: 'smile',
            exact: true,
          },
        ],
      },
    ],
  },
  {
    path: '/demo',
    name: 'demo',
    icon: 'heart',
  },
];
const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] =>
  menus.map(({ icon, children, ...item }) => ({
    ...item,
    icon: icon && IconMap[icon as string],
    children: children && loopMenuItem(children),
  }));

看到这里基本大体思路就出来了，但是这里引入的是antd的icon，我们想要使用本地的png图片作为icon要怎么做呢

首先把我们需要的文件引入，以上面的例子为例，我做了相应更改

const IconMap = {
  smile: require('放入我们本地图片文件的地址'),
  heart: require('放入我们本地图片文件的地址'),
};

接下来我们需要写一个方法转换一下图片，使其显示出来，要不直接引用显示出来的直接是一串图片地址

const MenuIcon = (imgSrc: any) => (
  <img
    style={{ width: 20, height: 20, marginRight: 10 }}
    src={imgSrc}
    alt="icon"
  />
);
// loopMenuItem 也要做相应的更改
const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] =>
  menus.map(({ icon, children, ...item }) => ({
    ...item,
    icon: icon && MenuIcon(IconMap[icon as string]),
    children: children && loopMenuItem(children),
  }));