From 93edfae53fbf7b8ba480ac7e9a292e17bb5b247a Mon Sep 17 00:00:00 2001
From: Alf Eaton <eaton.alf@gmail.com>
Date: Thu, 31 Aug 2017 10:24:41 +0100
Subject: [PATCH] Add Icon, using react-feather
closes #23
---
package.json | 2 ++
src/atoms/Icon.js | 17 +++++++++++++++++
src/atoms/Icon.md | 17 +++++++++++++++++
3 files changed, 36 insertions(+)
create mode 100644 src/atoms/Icon.js
create mode 100644 src/atoms/Icon.md
diff --git a/package.json b/package.json
index c19319137..ce70ed9d4 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,11 @@
"jsnext:main": "src",
"dependencies": {
"classnames": "^2.2.5",
+ "humps": "^2.0.1",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-dom": "^15.6.1",
+ "react-feather": "^1.0.7",
"react-redux": "^5.0.6",
"react-router": "^3.0.5",
"react-tag-autocomplete": "^5.4.1",
diff --git a/src/atoms/Icon.js b/src/atoms/Icon.js
new file mode 100644
index 000000000..6c3a37d89
--- /dev/null
+++ b/src/atoms/Icon.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { pascalize } from 'humps'
+import * as icons from 'react-feather'
+
+const Icon = ({ children, color = 'black', size = 24 }) => {
+ // convert `arrow_left` to `ArrowLeft`
+ const name = pascalize(children)
+
+ // select the icon
+ const icon = icons[name]
+
+ return (
+ <span>{icon({ color, size })}</span>
+ )
+}
+
+export default Icon
diff --git a/src/atoms/Icon.md b/src/atoms/Icon.md
new file mode 100644
index 000000000..bbee05936
--- /dev/null
+++ b/src/atoms/Icon.md
@@ -0,0 +1,17 @@
+An icon, from the [Feather](https://feathericons.com/) icon set.
+
+```js
+<Icon>arrow_right</Icon>
+```
+
+The color can be changed.
+
+```js
+<Icon color="red">arrow_right</Icon>
+```
+
+The size can be changed.
+
+```js
+<Icon size={48}>arrow_right</Icon>
+```
--
GitLab