ant design Pro 项目中官方文档提供给我们定义菜单的icon方式有两种:
使用ant design内部的icon
使用http url地址
但是怎么使用iconFont的icon呢,这里文档里没有说明
我查看了下它的源码,了解到它内部是可以使用iconFont的,可以看如下代码
// https://github.com/ant-design/ant-design-pro-layout/blob/master/src/SiderMenu/BaseMenu.tsx
// scriptUrl: iconFont
let IconFont = Icon.createFromIconfontCN({
scriptUrl: defaultSettings.iconfontUrl,
});
// Allow menu.js config icon as string or ReactNode
// icon: 'setting',
// icon: 'icon-geren' #For Iconfont ,
// icon: 'http://demo.com/icon.png',
// icon: '/favicon.png',
// icon: <Icon type="setting" />,
const getIcon = (icon?: string | React.ReactNode): React.ReactNode => {
if (typeof icon === 'string') {
if (isUrl(icon)) {
return (
<Icon
component={() => (
<img src={icon} alt="icon" className="ant-pro-sider-menu-icon" />
)}
/>
);
}
if (icon.startsWith('icon-')) {
return <IconFont type={icon} />;
}
return <Icon type={icon} />;
}
return icon;
};
以上代码比较简单,大致意思就是要使用iconFont的图标必须满足两个条件
传入一个iconFont的url链接
icon命名必须以icon-开头
这个url怎么来呢,这个url就是下图中的url部分
依照上图,找到这个url,然后把它赋值给config/defaultSettings.ts下的iconfontUrl属性。最后就可以在路由配置文件config/config.ts下的路由配置文件中使用iconFont的图标了
export default {
const proSettings = {
navTheme: 'dark',
// 拂晓蓝
primaryColor: '#1890ff',
layout: 'side',
contentWidth: 'Fluid',
fixSiderbar: true,
colorWeak: false,
menu: {
locale: true,
},
title: 'Alpha',
pwa: false,
iconfontUrl: '',
fixedHeader: true,
footerRender: false,
iconfontUrl: '//at.alicdn.com/t/font_2285259_6zk87w4elw7.js',
};
export default proSettings;
{
path: '/home',
name: 'home',
icon: 'icon-home', // 需要以 icon- 开头
component: './home',
},
以上基本就可以了。如实现就不用继续往下走了。
但是, 我们的设计小姐姐不按套路出牌,没有‘icon-’,同时我们采取了动态请求后台返回路由方式,同样场景应用于有的版本不同,不支持直接加icon 。
之后我才用的是把icon下载到本地 ,之后在src > layouts > BasicLayout
const menuDataRender = (menuList) => {
const menuData = menuList.map((item) => {
const localItem = {
...item,
children: item.children ? menuDataRender(item.children) : undefined,
};
if (localItem.icon && localItem.icon.startsWith('icon')) {
localItem.icon = <span className={`icon iconfont ${localItem.icon}`} />
}
return Authorized.check(item.authority, localItem, null);
});
return menuData
}
判断路由下是否有icon属性 加个span 标签 完成