ico

src/components/ui/ico.js

@@ -1,8 +1,8 @@
-import React, { PropTypes } from 'react'
-import styles form './ico.less'
+import React, {PropTypes} from 'react'
+import styles from './ico.less'
 
-const Ico = (type) => <svg className={styles.ico} aria-hidden="true">
-    <use xlink:href={`#icon-${type}`}></use>
-</svg>
+const Ico = ({type}) => <span dangerouslySetInnerHTML={{
+  __html: `<svg class="ico" aria-hidden="true"><use xlink:href="#anticon-${type}"></use></svg>`
+}}/>
 
 export default Ico

src/components/ui/ico.less

@@ -1,7 +1,8 @@
-.ico {
+:global .ico {
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
+  font-size: 16px;
 }

src/components/ui/index.js

@@ -0,0 +1,3 @@
+import Ico from './ico.js'
+
+export {Ico}

src/routes/ui/ico.js

@@ -1,6 +1,13 @@
 import React, { PropTypes } from 'react'
+import {Ico} from '../../components/ui'
+import styles from './ico.less'
 
-const IcoPage = () => <div>666</div>
+const iconlist = ['Cherry','Cheese','Bread','Beer','Beet','Bacon','Banana','Asparagus','Apple']
 
+const IcoPage = () => <div className="content-inner">
+  <ul className={styles.list}>
+    {iconlist.map ( item =><li key={item}><Ico className={styles.icon} type={item} /><span className={styles.name}>{item}</span></li>)}
+  </ul>
+</div>
 
 export default IcoPage

src/routes/ui/ico.less

@@ -1,7 +1,33 @@
-.ico {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-right: -24px;
+
+  li {
+    width: 160px;
+    text-align: center;
+    cursor: pointer;
+    height: 100px;
+    transition: all 0.5s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-right: 24px;
+    margin-bottom: 24px;
+    box-sizing: border-box;
+    border: solid 1px transparent;
+
+    &:hover{
+      border: solid 1px #f5f5f5;
+    }
+  }
+
+  .name {
+    margin-top: 16px;
+  }
+
+  :global .ico {
+    font-size: 48px;
+  }
 }

src/utils/menu.js

@@ -12,7 +12,7 @@ module.exports = [
   {
     key: 'ui',
     name: 'UI组件',
-    icon: 'laptop',
+    icon: 'camera-o',
     clickable:false,
     child:[
       {