From 74f0a0aa6a9ba4a144d97fd90e31b4db2342bc66 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 4 Jan 2018 21:31:38 +0800
Subject: [PATCH] Allow menu icon config as img url or ReactNode

---
 src/components/SiderMenu/SiderMenu.js | 18 ++++++++++++++++--
 src/components/SiderMenu/index.less   |  7 +++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js
index 8d2108b2..813086cb 100644
--- a/src/components/SiderMenu/SiderMenu.js
+++ b/src/components/SiderMenu/SiderMenu.js
@@ -6,6 +6,20 @@ import styles from './index.less';
 const { Sider } = Layout;
 const { SubMenu } = Menu;
 
+// Allow menu.js config icon as string or ReactNode
+//   icon: 'setting',
+//   icon: 'http://demo.com/icon.png',
+//   icon: <Icon type="setting" />,
+const getIcon = (icon) => {
+  if (typeof icon === 'string' && icon.indexOf('http') === 0) {
+    return <img src={icon} alt="icon" className={styles.icon} />;
+  }
+  if (typeof icon === 'string') {
+    return <Icon type={icon} />;
+  }
+  return icon;
+};
+
 export default class SiderMenu extends PureComponent {
   constructor(props) {
     super(props);
@@ -84,7 +98,7 @@ export default class SiderMenu extends PureComponent {
               title={
                 item.icon ? (
                   <span>
-                    <Icon type={item.icon} />
+                    {getIcon(item.icon)}
                     <span>{item.name}</span>
                   </span>
                 ) : item.name
@@ -95,7 +109,7 @@ export default class SiderMenu extends PureComponent {
             </SubMenu>
           );
       }
-      const icon = item.icon && <Icon type={item.icon} />;
+      const icon = getIcon(item.icon);
       return item.hideInMenu ? null :
         (
           <Menu.Item key={item.key || item.path}>
diff --git a/src/components/SiderMenu/index.less b/src/components/SiderMenu/index.less
index 37c59cb5..ede5baf8 100644
--- a/src/components/SiderMenu/index.less
+++ b/src/components/SiderMenu/index.less
@@ -23,12 +23,19 @@
     font-weight: 600;
   }
 }
+
 .sider {
   min-height: 100vh;
   box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
   position: relative;
   z-index: 10;
 }
+
+.icon {
+  width: 14px;
+  margin-right: 10px;
+}
+
 :global {
   .drawer .drawer-content {
     background: #001529;
-- 
GitLab