
import React from 'react'
import Icon from '../../../components/icon'

export default class IconRoute extends React.Component {

  render () {
    let icons = Object.keys(Icon).map((key, index) => {
      if (key !== 'Button') {
        let value = Icon[key]
        return (
          <div key={index} style={{display: 'flex', alignItems: 'center', marginBottom: 20}}>
            {React.createElement(value)}
            <span style={{marginLeft: 10}}>{key}</span>
          </div>
        )
      }
    })
    return (
      <div>
        <section>
          <h2>Icons</h2>
          {icons}
        </section>
        <section>
          <h2>Icon button</h2>
          <Icon.Button onClick={() => {}}>
            <Icon.Help />
          </Icon.Button>
        </section>
      </div>
    )
  }

}

@@ -1,13 +1,12 @@
-%0A
 import React
@@ -264,51 +264,22 @@
     
-return (%0A          %3Cdiv key=%7Bindex%7D
+const
  style
-=%7B
+ = 
 %7Bdis
@@ -318,25 +318,131 @@
 r', 
-marginBottom: 20%7D
+padding: 20, flexDirection: 'column', float: 'left', width: '33%25'%7D%0A        return (%0A          %3Cdiv key=%7Bindex%7D style=%7Bstyle
 %7D%3E%0A 
@@ -579,16 +579,47 @@
 %0A    %7D)%0A
+    const noop = () =%3E %7B%0A    %7D%0A
     retu
@@ -800,16 +800,12 @@
 ck=%7B
-() =%3E %7B%7D
+noop
 %7D%3E%0A 

make icons appear as grid