ant design 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的圖標必須知足兩個條件

1. 傳入一個iconFont的url連接
2. icon命名必須以icon-開頭

這個url怎麼來呢，這個url就是下圖中的url部分，須要將後綴名改成.js

依照上圖，找到這個url，而後把它賦值給config/defaultSettings.ts下的iconfontUrl屬性。

export default {
  navTheme: 'dark',
  primaryColor: '#333EBC',
  layout: 'sidemenu',
  contentWidth: 'Fluid',
  fixedHeader: true,
  autoHideHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  menu: {
    locale: true,
  },
  title: 'The Force',
  pwa: false,
  iconfontUrl: '//at.alicdn.com/t/font_1266539_d2jqk1q16kg.js',
} as DefaultSettings;
複製代碼

最後就能夠在路由配置文件config/config.ts下的路由配置文件中使用iconFont的圖標了

{
  path: '/home',
  name: 'home',
  icon: 'icon-home', // 須要以 icon- 開頭
  component: './home',
},

複製代碼

若是幫到你，請點個贊哦！！