From 0ebcdc884ec9377249a8ad20041501b07a56d331 Mon Sep 17 00:00:00 2001
From: Ostwind <9837438@qq.com>
Date: Fri, 15 Feb 2019 11:15:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0IconFont=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=81=E8=8F=9C=E5=8D=95=E5=9B=BE=E6=A0=87=E5=8F=AF=E4=BB=A5?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E8=87=AA=E5=B7=B1=E7=9A=84IconFont=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E5=9B=BE=E6=A0=87=20(#3517)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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     |  7 +++++++
 src/components/SiderMenu/BaseMenu.js | 11 ++++++++---
 src/defaultSettings.js               |  4 ++++
 3 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 src/components/IconFont/index.js

diff --git a/src/components/IconFont/index.js b/src/components/IconFont/index.js
new file mode 100644
index 00000000..0b99dec3
--- /dev/null
+++ b/src/components/IconFont/index.js
@@ -0,0 +1,7 @@
+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 });
diff --git a/src/components/SiderMenu/BaseMenu.js b/src/components/SiderMenu/BaseMenu.js
index 10a0eb76..6c8c7022 100644
--- a/src/components/SiderMenu/BaseMenu.js
+++ b/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;
diff --git a/src/defaultSettings.js b/src/defaultSettings.js
index dfdb5341..4ba7eb39 100644
--- a/src/defaultSettings.js
+++ b/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: '',
 };
-- 
GitLab