From da64cac4147671714bba6161682b817e871f4003 Mon Sep 17 00:00:00 2001
From: diro <diro@diromacbook.local>
Date: Tue, 6 Jun 2017 20:45:56 +0800
Subject: [PATCH 1/3] fix the wrong iconName

---
 src/routes/UIElement/iconfont/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/UIElement/iconfont/index.js b/src/routes/UIElement/iconfont/index.js
index e15ff0c..96557b7 100644
--- a/src/routes/UIElement/iconfont/index.js
+++ b/src/routes/UIElement/iconfont/index.js
@@ -25,7 +25,7 @@ const localRequireSVGIcons = [
 ]
 
 const IcoPage = () => <div className="content-inner">
-  <Icon type="star-oo" />
+  <Icon type="star-o" />
   <h2 style={{ margin: '16px 0' }}>Colorful Icon</h2>
   <ul className={styles.list}>
     {colorfulIcons.map(item => <li key={item}>

From fe8527e72ebed7c8d341d31a846df2d98f6e6ad9 Mon Sep 17 00:00:00 2001
From: diro <diro@diromacbook.local>
Date: Tue, 6 Jun 2017 21:08:42 +0800
Subject: [PATCH 2/3] enable the custom ClassName

---
 src/components/Iconfont/Iconfont.js | 33 ++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/Iconfont/Iconfont.js b/src/components/Iconfont/Iconfont.js
index 1c54eff..9b48342 100644
--- a/src/components/Iconfont/Iconfont.js
+++ b/src/components/Iconfont/Iconfont.js
@@ -1,21 +1,38 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import './iconfont.less'
 
-const Iconfont = ({ type, colorful }) => {
+const Iconfont = ({ type, colorful, className }) => {
+  const propsClassName = className;
+
+  const csSvg = classnames(
+    { 'colorful-icon': true },
+    { [`${propsClassName}`]: className !== undefined },
+  );
+
   if (colorful) {
-    return (<span
-      dangerouslySetInnerHTML={{
-        __html: `<svg class="colorful-icon" aria-hidden="true"><use xlink:href="#${type.startsWith('#') ? type.replace(/#/, '') : type}"></use></svg>`,
-      }}
-    />)
+    return (
+      <svg className={csSvg} aria-hidden="true">
+        <use xlinkHref={`#${type.startsWith('#') ? type.replace(/#/, '') : type}`} />
+      </svg>
+    );
   }
-  return <i className={`antdadmin icon-${type}`} />
+  const csFont = classnames(
+    { antdadmin: true },
+    { [`icon-${type}`]: true },
+    { [`${propsClassName}`]: className !== undefined },
+  );
+  return <i className={csFont} />;
 }
 
 Iconfont.propTypes = {
-  type: PropTypes.string,
+  type: PropTypes.string.isRequired,
   colorful: PropTypes.bool,
 }
 
+Iconfont.defaultProps = {
+  colorful: false,
+}
+
 export default Iconfont

From 38637ef167067cf2bfc5300f97708ae2881427a3 Mon Sep 17 00:00:00 2001
From: diro <diro@diromacbook.local>
Date: Tue, 6 Jun 2017 21:10:01 +0800
Subject: [PATCH 3/3] =?UTF-8?q?Example=20for=20the=20=E2=80=9Dcustom=20cla?=
 =?UTF-8?q?ssName=20iconfont=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/UIElement/iconfont/index.js   |  7 +++----
 src/routes/UIElement/iconfont/index.less | 14 ++++++--------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/routes/UIElement/iconfont/index.js b/src/routes/UIElement/iconfont/index.js
index 96557b7..e422b12 100644
--- a/src/routes/UIElement/iconfont/index.js
+++ b/src/routes/UIElement/iconfont/index.js
@@ -23,13 +23,12 @@ const localRequireSVGIcons = [
   require('../../../svg/cute/sweat.svg'),
   require('../../../svg/cute/think.svg'),
 ]
-
 const IcoPage = () => <div className="content-inner">
   <Icon type="star-o" />
   <h2 style={{ margin: '16px 0' }}>Colorful Icon</h2>
   <ul className={styles.list}>
     {colorfulIcons.map(item => <li key={item}>
-      <Iconfont className={styles.icon} colorful type={item} />
+      <Iconfont className={styles.colorfulIcon} colorful type={item} />
       <span className={styles.name}>{item}</span>
     </li>)}
   </ul>
@@ -43,14 +42,14 @@ const IcoPage = () => <div className="content-inner">
   <h2 style={{ margin: '16px 0' }}>Local SVG</h2>
   <ul className={styles.list}>
     {localSVGIcons.map(item => <li key={item}>
-      <Iconfont className={styles.icon} colorful type={item} />
+      <Iconfont className={styles.colorfulIcon} colorful type={item} />
       <span className={styles.name}>{item}</span>
     </li>)}
   </ul>
   <h2 style={{ margin: '16px 0' }}>Local Require SVG</h2>
   <ul className={styles.list}>
     {localRequireSVGIcons.map(item => <li key={item}>
-      <Iconfont className={styles.icon} colorful type={item} />
+      <Iconfont className={styles.colorfulIcon} colorful type={item} />
       <span className={styles.name}>{item}</span>
     </li>)}
   </ul>
diff --git a/src/routes/UIElement/iconfont/index.less b/src/routes/UIElement/iconfont/index.less
index d8f2f06..7bc0a40 100644
--- a/src/routes/UIElement/iconfont/index.less
+++ b/src/routes/UIElement/iconfont/index.less
@@ -26,15 +26,13 @@
     margin-top: 8px;
   }
 
-  :global {
-    .colorful-icon {
-      font-size: 36px;
-    }
+  .colorfulIcon {
+    font-size: 36px;
+  }
 
-    .antdadmin {
-      font-size: 32px;
-      line-height: 1;
-    }
+  .icon {
+    font-size: 32px;
+    line-height: 1;
   }
 }
 @media (min-width: 1600px) {