增加IconFont组件、菜单图标可以使用自己的IconFont项目图标 (#3517)

* feature:
1.add iconfont component;
2.menu can add iconfont icon.

* fix: 调整菜单引入iconfont的方式为String.
1. 新增IconFont组件,需在组件内配置自己的IconFont图标项目地址;
2. 然后,菜单图标可以引入自己的IconFont图标,图标字符串以icon-开头.

* ajust: put the IconFont Script Url into defaultSetting.js

* 调整iconfontUrl名称

* fix:注释更新

* 留空iconfontUrl

src/components/IconFont/index.js

+import { Icon } from 'antd';
+import { iconfontUrl as scriptUrl } from '../../defaultSettings';
+
+// 使用：
+// import IconFont from '@/components/IconFont';
+// <IconFont type='icon-demo' className='xxx-xxx' />
+export default Icon.createFromIconfontCN({ scriptUrl });

src/components/SiderMenu/BaseMenu.js

@@ -6,18 +6,23 @@ import { urlToList } from '../_utils/pathTools';
 import { getMenuMatches } from './SiderMenuUtils';
 import { isUrl } from '@/utils/utils';
 import styles from './index.less';
+import IconFont from '@/components/IconFont';
 
 const { SubMenu } = Menu;
 
 // Allow menu.js config icon as string or ReactNode
 //   icon: 'setting',
+//   icon: 'icon-geren' #For Iconfont ,
 //   icon: 'http://demo.com/icon.png',
 //   icon: <Icon type="setting" />,
 const getIcon = icon => {
-  if (typeof icon === 'string' && isUrl(icon)) {
-    return <Icon component={() => <img src={icon} alt="icon" className={styles.icon} />} />;
-  }
   if (typeof icon === 'string') {
+    if (isUrl(icon)) {
+      return <Icon component={() => <img src={icon} alt="icon" className={styles.icon} />} />;
+    }
+    if (icon.startsWith('icon-')) {
+      return <IconFont type={icon} />;
+    }
     return <Icon type={icon} />;
   }
   return icon;

src/defaultSettings.js

@@ -11,4 +11,8 @@ module.exports = {
   },
   title: 'Ant Design Pro',
   pwa: true,
+  // your iconfont Symbol Scrip Url
+  // eg：//at.alicdn.com/t/font_1039637_btcrd5co4w.js
+  // 注意：如果需要图标多色，Iconfont图标项目里要进行批量去色处理
+  iconfontUrl: '',
 };