浅谈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,
);

补充知识：Ant Design Pro Of Vue 项目中路由菜单icon 修改或新增

在 config / router.config.js 中修改，直接从 ant-design-vue-icon 取，只要 icon 组件的 type 值即可。

如：

以上这篇Ant Design Pro 菜单自定义 icon就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。