From 5fc507d9a9702de338e754bef2bdad0898797246 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Wed, 23 Nov 2016 15:00:10 +0000
Subject: [PATCH] adding in icon ui component and  react-icon node module

---
 ui/docs/root.js                  |  1 +
 ui/package.json                  |  1 +
 ui/src/components/icon/index.js  | 21 ++++++++++++++++----
 ui/src/components/icon/readme.md | 33 +++++++++++++++-----------------
 ui/src/components/icon/style.css |  3 +++
 ui/src/docs.js                   |  1 +
 ui/src/index.js                  |  1 +
 ui/yarn.lock                     | 10 ++++++++++
 8 files changed, 49 insertions(+), 22 deletions(-)
 create mode 100644 ui/src/components/icon/style.css

diff --git a/ui/docs/root.js b/ui/docs/root.js
index 337d93d7..bfa2a562 100644
--- a/ui/docs/root.js
+++ b/ui/docs/root.js
@@ -2,6 +2,7 @@ const React = require('react');
 const ReactHotLoader = require('react-hot-loader');
 const ReactRouter = require('react-router');
 
+// const App = require('../src/components/icon/');
 const App = require('./containers/app/');
 
 const {
diff --git a/ui/package.json b/ui/package.json
index 2612b7ce..c4f2262b 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -24,6 +24,7 @@
     "param-case": "^2.1.0",
     "react": "^15.3.2",
     "react-a11y": "^0.3.3",
+    "react-icons": "^2.2.1",
     "reduce-css-calc": "^1.3.0",
     "traverse": "^0.6.6"
   },
diff --git a/ui/src/components/icon/index.js b/ui/src/components/icon/index.js
index 973d9d71..1eb1c8b0 100644
--- a/ui/src/components/icon/index.js
+++ b/ui/src/components/icon/index.js
@@ -1,18 +1,31 @@
 const React = require('react');
-// const icons = require('react-icons/md');
+const classNames = require('classnames');
+const styles = require('./style.css');
 
 const Icon = ({
   name,
   className,
+  iconSet,
   style
 }) => {
-  // const Component = icons[name];
-  // <Component className={className} style={style} />
-  return (<div />);
+
+  const Component = require(`react-icons/lib/${iconSet}/${name}`);
+
+  const cn = classNames(
+    className,
+    styles.icon
+  );
+
+  return (
+    <div>
+      <Component className={cn} style={style} />
+    </div>
+  );
 };
 
 Icon.propTypes = {
   className: React.PropTypes.string,
+  iconSet: React.PropTypes.string.isRequired,
   name: React.PropTypes.string.isRequired,
   style: React.PropTypes.object
 };
diff --git a/ui/src/components/icon/readme.md b/ui/src/components/icon/readme.md
index 71d653dd..d4764e77 100644
--- a/ui/src/components/icon/readme.md
+++ b/ui/src/components/icon/readme.md
@@ -9,32 +9,29 @@ const Base = require('../base');
 const Container = require('../container');
 const Row = require('../row');
 const Column = require('../column');
-const Checkbox = require('./index.js');
+const Icon = require('./index.js');
 const styles = require('./style.css');
 
 nmodule.exports = ReactDOM.renderToString(
   <Base>
     <Row>
       <Column>
-        <Checkbox checked>
-          Checkbox checked
-        </Checkbox>
-      </Column>
-    </Row>
-    <Row>
-      <Column>
-        <Checkbox>
-          Checkbox unchecked
-        </Checkbox>
-      </Column>
-    </Row>
-    <Row>
-      <Column>
-        <Checkbox disabled>
-          Checkbox disabled
-        </Checkbox>
+        <Icon iconSet='fa' name='beer' />
       </Column>
     </Row>
   </Base>
 );
 ```
+
+## usage
+
+```js
+const React = require('react');
+const Icon = require('ui/icon');
+
+module.exports = () => {
+  return (
+    <Icon iconSet='fa' name='beer' />
+  );
+}
+```
diff --git a/ui/src/components/icon/style.css b/ui/src/components/icon/style.css
new file mode 100644
index 00000000..86e66eb4
--- /dev/null
+++ b/ui/src/components/icon/style.css
@@ -0,0 +1,3 @@
+.icon {
+  font-size: inherit;
+}
diff --git a/ui/src/docs.js b/ui/src/docs.js
index abf70293..51f3218e 100644
--- a/ui/src/docs.js
+++ b/ui/src/docs.js
@@ -10,6 +10,7 @@ module.exports = {
     Container: require('./components/container/readme.md'),
     Row: require('./components/row/readme.md'),
     Input: require('./components/input/readme.md'),
+    Icon: require('./components/icon/readme.md'),
     Radio: require('./components/radio/readme.md'),
     'Radio Group': require('./components/radio-group/readme.md'),
     Select: require('./components/select/readme.md'),
diff --git a/ui/src/index.js b/ui/src/index.js
index 80d7c1e0..b5aebfcd 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -10,6 +10,7 @@ module.exports = {
   Tabs: require('./components/tabs'),
   Toggle: require('./components/toggle'),
   Input: require('./components/input'),
+  Icon: require('./components/icon'),
   RangeSlider: require('./components/range-slider'),
   Radio: require('./components/radio'),
   RadioGroup: require('./components/radio-group'),
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 1983d69e..5976fc3c 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -5275,6 +5275,16 @@ react-hot-loader@^3.0.0-beta.6:
     redbox-react "^1.2.5"
     source-map "^0.4.4"
 
+react-icon-base@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.0.3.tgz#f5d9083f64c903d3e983fc9b3f292314b0c0f262"
+
+react-icons:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-2.2.1.tgz#354d725d60acf341d09fd50c6398ae7b97d7f157"
+  dependencies:
+    react-icon-base "2.0.3"
+
 react-proxy@^3.0.0-alpha.0:
   version "3.0.0-alpha.1"
   resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"