umi使用layout配置及导航栏使用自定义icon

app.ts中定义layout配置项

除了下面的插件支持的特有配置外，运行时配置支持所有的构建时配置并透传给 @ant-design/pro-layout

title： 显示在布局左上角的产品名，默认值为包名；

logo：显示在布局左上角产品名前的产品 Logo；

logout：用于运行时配置默认 Layout 的 UI 中，点击退出登录的处理逻辑，默认不做处理；

rightRender：默认展示用户名、头像、退出登录相关组件；

onError：发生错误后的回调；

ErrorComponent：发生错误后展示的组件；

export const layout: RunTimeLayoutConfig = () => {
  return {
    title："标题",
    logo: './logo.svg',
    menu: {
      locale: false,
    },
    rightContentRender: () => <RightContent />,
    footerRender: () => <Footer />,
    menuHeaderRender: undefined,
    
    
    // 其他属性见：https://procomponents.ant.design/components/layout#prolayout
    layout: "mix",
    postMenuData: (menuData: MenuDataItem[]) =>{ // 处理基于Umi 的路由菜单数据，可在此处添加自定义侧边栏icon
      return menuData.map(menuItem =>({...menuItem, icon: <IconFont type="icon-test" /> // 这里使用的是 iconfont }));自定义
    }
  };
};

导航栏使用自定义icon

这里总结了三种方式：

• 手动引入

  通过layout配置中的postMenuData或menuDataRender遍历menuData,手动添加icon，这里可以引入<svg />或<img />等；

postMenuData: (menuData: MenuDataItem[]) =>{ 
    return menuData.map(menuItem =>({
        ...menuItem, 
        icon: <img src="./icon.png" /> 
      }));

• 直接配置icon

  使用img的src

  在.umirc.ts文件中配置routes,icon只能是string类型；所以配置文件中直接使用img标签是不可行的，但是icon支持img的src；

export const routes: MenuDataItem[] = [
  {
    name: '首页',
    path: '/home',
    component: './Home',
    icon: "./homeIcon.png", 
    // icon: "https://xxxx.png", 
  },
];

使用antdesign 内置的icon @ant-design/icons;

export const routes: MenuDataItem[] = [
  {
    name: '首页',
    path: '/home',
    component: './Home',
    icon: "HomeOutlined",  
  },
];

• 引入iconfont配置;

import { createFromIconfontCN } from '@ant-design/icons';

const IconFont  = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});

export const routes: MenuDataItem[] = [
  {
    name: '首页',
    path: '/home',
    component: './Home',
    icon: "icon-home",  
  },
];