From d5b98bed8a487ffd9bb39ee4855e89083bbffbc5 Mon Sep 17 00:00:00 2001 From: Declan Elcocks Date: Thu, 4 May 2017 14:10:56 +0800 Subject: [PATCH 1/6] feature(icon): Add Icon component to inject an SVG icon easily --- client/components/Home/index.js | 5 +++++ client/composeComponents/Icon/icons/github.svg | 5 +++++ client/composeComponents/Icon/index.js | 10 ++++++++++ client/composeComponents/Icon/style.scss | 16 ++++++++++++++++ package.json | 1 + 5 files changed, 37 insertions(+) create mode 100644 client/composeComponents/Icon/icons/github.svg create mode 100644 client/composeComponents/Icon/index.js create mode 100644 client/composeComponents/Icon/style.scss diff --git a/client/components/Home/index.js b/client/components/Home/index.js index 4c72d59..8419f21 100644 --- a/client/components/Home/index.js +++ b/client/components/Home/index.js @@ -4,6 +4,7 @@ import Touchable from '../../composeComponents/Ripple/Touch'; import Header from './Header'; import Trends from './Trends'; import Items from './Items'; +import Icon from '../../composeComponents/Icon'; import { whyDidYouUpdateWrapper } from '../../utils/why-did-you-update'; import { action as SearchAction } from '../Search'; @@ -25,10 +26,14 @@ class Home extends Component { return (
+
+ + + {'Search'}
diff --git a/client/composeComponents/Icon/icons/github.svg b/client/composeComponents/Icon/icons/github.svg new file mode 100644 index 0000000..ced4354 --- /dev/null +++ b/client/composeComponents/Icon/icons/github.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/client/composeComponents/Icon/index.js b/client/composeComponents/Icon/index.js new file mode 100644 index 0000000..8369d6d --- /dev/null +++ b/client/composeComponents/Icon/index.js @@ -0,0 +1,10 @@ +import './style.scss'; +import React from 'react'; + +const Icon = ({ icon }) => { + const svg = require(`raw-loader!./icons/${icon}.svg`); + + return
; +} + +export default Icon; \ No newline at end of file diff --git a/client/composeComponents/Icon/style.scss b/client/composeComponents/Icon/style.scss new file mode 100644 index 0000000..3450a22 --- /dev/null +++ b/client/composeComponents/Icon/style.scss @@ -0,0 +1,16 @@ +.icon { + display: inline-block; + font-size: 16px; + color: #000; + width: 1em; + height: 1em; + margin: 0.1em; + box-sizing: border-box; + + & > svg { + width: 100%; + height: 100%; + fill: #000; + stroke: #000; + } +} \ No newline at end of file diff --git a/package.json b/package.json index fe3c060..7b72065 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "pg-hstore": "^2.3.2", "pug": "^2.0.0-beta9", "qs": "^6.4.0", + "raw-loader": "^0.5.1", "react": "^15.4.2", "react-addons-create-fragment": "^15.4.2", "react-addons-transition-group": "^15.4.2", From 8166c25691736bb968348a9ea8b39b86eb4bbd5a Mon Sep 17 00:00:00 2001 From: Declan Elcocks Date: Thu, 4 May 2017 14:09:38 +0800 Subject: [PATCH 2/6] feature(icon): Tidy Icon syntax --- client/composeComponents/Icon/index.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/client/composeComponents/Icon/index.js b/client/composeComponents/Icon/index.js index 8369d6d..a440796 100644 --- a/client/composeComponents/Icon/index.js +++ b/client/composeComponents/Icon/index.js @@ -4,7 +4,12 @@ import React from 'react'; const Icon = ({ icon }) => { const svg = require(`raw-loader!./icons/${icon}.svg`); - return
; + return ( +
+ ); } -export default Icon; \ No newline at end of file +export default Icon; From d0fc1df1abbbd5ca4c23aca944a0b19a1d5dba33 Mon Sep 17 00:00:00 2001 From: Declan Elcocks Date: Thu, 4 May 2017 14:17:33 +0800 Subject: [PATCH 3/6] feature(icon): Add search icon as svg to replace GitHub logo test --- client/components/Home/index.js | 2 +- client/composeComponents/Icon/icons/github.svg | 5 ----- client/composeComponents/Icon/icons/search.svg | 1 + search | 1 + 4 files changed, 3 insertions(+), 6 deletions(-) delete mode 100644 client/composeComponents/Icon/icons/github.svg create mode 100644 client/composeComponents/Icon/icons/search.svg create mode 100644 search diff --git a/client/components/Home/index.js b/client/components/Home/index.js index 8419f21..9d28024 100644 --- a/client/components/Home/index.js +++ b/client/components/Home/index.js @@ -32,7 +32,7 @@ class Home extends Component {
- + {'Search'}
diff --git a/client/composeComponents/Icon/icons/github.svg b/client/composeComponents/Icon/icons/github.svg deleted file mode 100644 index ced4354..0000000 --- a/client/composeComponents/Icon/icons/github.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/client/composeComponents/Icon/icons/search.svg b/client/composeComponents/Icon/icons/search.svg new file mode 100644 index 0000000..fc17a95 --- /dev/null +++ b/client/composeComponents/Icon/icons/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/search b/search new file mode 100644 index 0000000..fc17a95 --- /dev/null +++ b/search @@ -0,0 +1 @@ + \ No newline at end of file From 475b02c49314109b6ad800e4124ac2df505e1d7d Mon Sep 17 00:00:00 2001 From: Declan Elcocks Date: Thu, 4 May 2017 14:21:07 +0800 Subject: [PATCH 4/6] feature(icon): Remove old .logo class for testing --- client/components/Home/index.js | 3 +-- client/components/Home/style.scss | 6 ------ 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/client/components/Home/index.js b/client/components/Home/index.js index 9d28024..8770480 100644 --- a/client/components/Home/index.js +++ b/client/components/Home/index.js @@ -30,8 +30,7 @@ class Home extends Component {
-
- + {'Search'} diff --git a/client/components/Home/style.scss b/client/components/Home/style.scss index 03dacee..16241e0 100644 --- a/client/components/Home/style.scss +++ b/client/components/Home/style.scss @@ -30,12 +30,6 @@ flex-direction: row; align-items: center; padding: 10px; - - .logo { - width: 30px; - height: 30px; - background: grey; - } // input { // background-color: transparent; // align-self: stretch; From 93bbd6b8afd66099f171d923e8809dde672de6c7 Mon Sep 17 00:00:00 2001 From: Declan Elcocks Date: Thu, 4 May 2017 15:33:41 +0800 Subject: [PATCH 5/6] feature(icon): Add Icon.propTypes and fix error when no icon name is passed in --- client/composeComponents/Icon/index.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/client/composeComponents/Icon/index.js b/client/composeComponents/Icon/index.js index a440796..77b191d 100644 --- a/client/composeComponents/Icon/index.js +++ b/client/composeComponents/Icon/index.js @@ -1,15 +1,19 @@ import './style.scss'; -import React from 'react'; +import React, { PropTypes } from 'react'; const Icon = ({ icon }) => { - const svg = require(`raw-loader!./icons/${icon}.svg`); + const svg = icon ? require(`raw-loader!./icons/${icon}.svg`) : ''; return ( -
+ /> :
); } +Icon.propTypes = { + icon: PropTypes.string.isRequired +}; + export default Icon; From 52ba9d30f0de11f99d5131ee9c4caaa856fa5198 Mon Sep 17 00:00:00 2001 From: Declan Elcocks Date: Fri, 5 May 2017 09:51:03 +0800 Subject: [PATCH 6/6] feature(icon): Fix according to ESLint --- client/components/Home/index.js | 2 -- client/composeComponents/Icon/index.js | 5 +++-- search | 1 - 3 files changed, 3 insertions(+), 5 deletions(-) delete mode 100644 search diff --git a/client/components/Home/index.js b/client/components/Home/index.js index 8770480..d6b9438 100644 --- a/client/components/Home/index.js +++ b/client/components/Home/index.js @@ -30,9 +30,7 @@ class Home extends Component {
- - {'Search'}
diff --git a/client/composeComponents/Icon/index.js b/client/composeComponents/Icon/index.js index 77b191d..0c2dd36 100644 --- a/client/composeComponents/Icon/index.js +++ b/client/composeComponents/Icon/index.js @@ -2,6 +2,7 @@ import './style.scss'; import React, { PropTypes } from 'react'; const Icon = ({ icon }) => { + // eslint-disable-next-line global-require const svg = icon ? require(`raw-loader!./icons/${icon}.svg`) : ''; return ( @@ -10,10 +11,10 @@ const Icon = ({ icon }) => { dangerouslySetInnerHTML={{ __html: svg }} /> :
); -} +}; Icon.propTypes = { - icon: PropTypes.string.isRequired + icon: PropTypes.string.isRequired, }; export default Icon; diff --git a/search b/search deleted file mode 100644 index fc17a95..0000000 --- a/search +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file