Ant Design Pro 菜单自定义 icon

Ant Design Pro 官方文档说明 在菜单中使用自定义的 icon

由于 umi 的限制，在 router.config.js 是不能直接只是用组件的，Pro 中暂时支持 使用 ant.design 本身的 icon type，和传入一个 img 的 url。只需要直接在 icon 属性上配置即可，如果是个 url，Pro 会自动处理为一个 img 标签。

如果这样还不能满足需求，可以自定义 getIcon 方法。

如果你想使用 iconfont 的图标，你可以使用ant.desgin的自定义图标.

1. getIcon方法

/* eslint no-useless-escape:0 */
const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;

export function isUrl(path) {
  return reg.test(path);
}

import { isUrl } from '../utils/utils';

const getIcon = icon => {
  if (typeof icon === 'string') {
    if (isUrl(icon)) {
      return  } />;
    }
    if (icon.startsWith('icon-')) {
      return ;
    }
    return ;
  }
  return icon;
};

这个getIcon 来自于 AntD Pro 源代码 getIcon 很全面，既可以用 Icon（使用AntD 提供的icon），又可以用 IconFont（使用www.iconfont.cn仓库的icon），还可以用静态资源文件（ 转换成 icon）；

实际项目中很多时候是需要替换成公司设计师设计的icon，因此我将他做了个简单的转换

const MenuIcon = ({imgStyle, imgSrc}) => (
   (
      
    )}
  />
);

// example 
// imgStyle 是由于UI切图 尺寸经常不够准确 img位置需要微调
const menuData = [
  {
    name: '首页',
    icon: ,
    path: 'home',
  },
]

 

注意：img width height 设置为 1em ,让它自适应parent组件的大小，实现菜单打开/关闭时，图片的缩放，如果给具体数值则没有缩放效果！！！

 

2. 使用ant.desgin的自定义图标（使用 svg）.

利用 Icon 组件封装一个可复用的自定义图标。可以通过 component 属性传入一个组件来渲染最终的图标，以满足特定的需求。

代码来自于 antd 官方文档 icon 自定义图标

import { Icon } from 'antd';

const HeartSvg = () => (
  
);

const PandaSvg = () => (
  
);

const HeartIcon = props => ;

const PandaIcon = props => ;

ReactDOM.render(
  

    
    
  
,
  mountNode,
);