ICONFONT

.eslintrc

@@ -21,6 +21,7 @@
     "react/jsx-no-bind": 0,
     "no-unused-vars": [2, { "ignoreRestSiblings": true }],
     "no-underscore-dangle": 0,
+    "global-require": 0,
   },
   "parser": "babel-eslint",
   "parserOptions": {

public/iconfont.css

@@ -0,0 +1,65 @@
+
+@font-face {font-family: "antdadmin";
+  src: url('iconfont.eot?t=1494298210172'); /* IE9*/
+  src: url('iconfont.eot?t=1494298210172#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('iconfont.woff?t=1494298210172') format('woff'), /* chrome, firefox */
+  url('iconfont.ttf?t=1494298210172') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1494298210172#antdadmin') format('svg'); /* iOS 4.1- */
+}
+
+.antdadmin {
+  font-family:"antdadmin" !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-home:before { content: "\e600"; }
+
+.icon-user:before { content: "\e601"; }
+
+.icon-timelimit:before { content: "\e602"; }
+
+.icon-shopcart:before { content: "\e603"; }
+
+.icon-message:before { content: "\e604"; }
+
+.icon-remind:before { content: "\e605"; }
+
+.icon-service:before { content: "\e606"; }
+
+.icon-shop:before { content: "\e607"; }
+
+.icon-sweep:before { content: "\e609"; }
+
+.icon-express:before { content: "\e60a"; }
+
+.icon-payment:before { content: "\e60b"; }
+
+.icon-search:before { content: "\e60c"; }
+
+.icon-feedback:before { content: "\e60d"; }
+
+.icon-pencil:before { content: "\e60e"; }
+
+.icon-setting:before { content: "\e60f"; }
+
+.icon-refund:before { content: "\e610"; }
+
+.icon-delete:before { content: "\e611"; }
+
+.icon-star:before { content: "\e612"; }
+
+.icon-heart:before { content: "\e613"; }
+
+.icon-share:before { content: "\e615"; }
+
+.icon-location:before { content: "\e616"; }
+
+.icon-position:before { content: "\e617"; }
+
+.icon-console:before { content: "\e618"; }
+
+.icon-mobile:before { content: "\e61a"; }
+

src/components/Iconfont/Iconfont.js

@@ -1,15 +1,22 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import './iconfont.less'
+require('../../svg/complaints.svg')
 
-const Iconfont = ({ type }) => <span
-  dangerouslySetInnerHTML={{
-    __html: `<svg class="iconfont" aria-hidden="true"><use xlink:href="#anticon-${type}"></use></svg>`,
-  }}
-/>
+const Iconfont = ({ type, colorful }) => {
+  if (colorful) {
+    return (<span
+      dangerouslySetInnerHTML={{
+        __html: `<svg class="colorful-icon" aria-hidden="true"><use xlink:href="#icon-${type}"></use></svg>`,
+      }}
+    />)
+  }
+  return <i className={`antdadmin icon-${type}`} />
+}
 
 Iconfont.propTypes = {
   type: PropTypes.string,
+  colorful: PropTypes.bool,
 }
 
 export default Iconfont

src/components/Iconfont/iconfont.less

@@ -1,4 +1,4 @@
-:global .iconfont {
+:global .colorful-icon {
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;

src/routes/UIElement/iconfont/index.js

@@ -1,14 +1,30 @@
 import React from 'react'
 import { Iconfont } from '../../../components'
-import { Table, Row, Col } from 'antd'
+import { Table, Row, Col, Icon } from 'antd'
 import styles from './index.less'
 
-const iconlist = ['Cherry', 'Cheese', 'Bread', 'Beer', 'Beet', 'Bacon', 'Banana', 'Asparagus', 'Apple']
+const colorfulIcons = ['boluo', 'baixiangguo', 'chengzi', 'boluomei', 'caomei', 'dayouzi', 'chelizi', 'fanqie', 'hamigua', 'ganlan',
+  'juzi', 'heimei', 'huolongguo', 'hongmei', 'lizi', 'lanmei', 'mangguo', 'mihoutao', 'longyan', 'mugua', 'lizi1', 'ningmeng']
+
+const flatIcons = ['home', 'user', 'timelimit', 'shopcart', 'message', 'remind', 'service', 'shop', 'sweep', 'express',
+  'payment', 'search', 'feedback', 'pencil', 'setting', 'refund', 'delete', 'star', 'heart', 'share', 'location', 'console']
 
 const IcoPage = () => <div className="content-inner">
+  <h2 style={{ margin: '16px 0' }}>Colorful</h2>
+  <ul className={styles.list}>
+    {colorfulIcons.map(item => <li key={item}>
+      <Iconfont className={styles.icon} colorful type={item} />
+      <span className={styles.name}>{item}</span>
+    </li>)}
+  </ul>
+  <h2 style={{ margin: '16px 0' }}>Flat</h2>
   <ul className={styles.list}>
-    {iconlist.map(item => <li key={item}><Iconfont className={styles.icon} type={item} /><span className={styles.name}>{item}</span></li>)}
+    {flatIcons.map(item => <li key={item}>
+      <Iconfont className={styles.icon} type={item} />
+      <span className={styles.name}>{item}</span>
+    </li>)}
   </ul>
+  <Icon type="emoji-kiss" local style={{ fontSize: 24 }} />
   <h2 style={{ margin: '16px 0' }}>Props</h2>
   <Row>
     <Col lg={18} md={24}>
@@ -41,10 +57,21 @@ const IcoPage = () => <div className="content-inner">
             desciption: '图标类型',
             type: 'String',
             default: '-',
+          },
+          {
+            props: 'colorful',
+            desciption: '是否是symbol类型的彩色图标',
+            type: 'Bool',
+            default: 'false',
           }]}
       />
     </Col>
   </Row>
+  <h2 style={{ margin: '16px 0' }}>Thanks</h2>
+  <p style={{ margin: '24px 0' }}>
+    <a href="http://www.iconfont.cn/user/detail?uid=116813">何阿酥</a> colorful fruit icon
+    <a href="http://www.iconfont.cn/collections/detail?cid=4014" target="_blank"> http://www.iconfont.cn/collections/detail?cid=4014</a>
+  </p>
 </div>
 
 export default IcoPage

src/routes/UIElement/iconfont/index.less

@@ -2,7 +2,6 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
-  margin-right: -24px;
 
   li {
     width: 160px;
@@ -13,21 +12,28 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-right: 24px;
     margin-bottom: 24px;
     box-sizing: border-box;
     border: solid 1px transparent;
+    justify-content: center;
 
     &:hover {
       border: solid 1px #f5f5f5;
     }
   }
 
   .name {
-    margin-top: 16px;
+    margin-top: 8px;
   }
 
-  :global .iconfont {
-    font-size: 48px;
+  :global {
+    .colorful-icon {
+      font-size: 36px;
+    }
+
+    .antdadmin {
+      font-size: 32px;
+      line-height: 1;
+    }
   }
 }

src/routes/app.js

@@ -62,13 +62,16 @@ const App = ({ children, location, dispatch, app, loading }) => {
     return <div>{children}</div>
   }
 
+  const { iconFontJS, iconFontCSS } = config
+
   return (
     <div>
       <Helmet>
         <title>ANTD ADMIN</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="icon" href={config.logoSrc} type="image/x-icon" />
-        {config.iconFontUrl ? <script src={config.iconFontUrl}></script> : ''}
+        {iconFontJS && <script src={iconFontJS}></script>}
+        {iconFontCSS && <link rel="stylesheet" href={iconFontCSS} />}
       </Helmet>
       <div className={classnames(styles.layout, { [styles.fold]: isNavbar ? false : siderFold }, { [styles.withnavbar]: isNavbar })}>
         {!isNavbar ? <aside className={classnames(styles.sider, { [styles.light]: !darkTheme })}>

src/utils/config.js

@@ -3,7 +3,8 @@ module.exports = {
   prefix: 'antdAdmin',
   footerText: 'Ant Design Admin  © 2017 zuiidea',
   logo: 'https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png',
-  iconFontUrl: '//at.alicdn.com/t/font_c4y7asse3q1cq5mi.js',
+  iconFontCSS: '/iconfont.css',
+  iconFontJS: '/iconfont.js',
   baseURL: 'http://localhost:8000/api/v1',
   YQL: ['http://www.zuimeitianqi.com'],
   CORS: ['http://localhost:7001', 'http://192.168.1.110:8000'],