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] 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