antd pro使用iconfont

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 标签 完成