From f6afa82551ceeabb12999ad6aab67cc7a0942841 Mon Sep 17 00:00:00 2001
From: Aanand Prasad <aanand.prasad@gmail.com>
Date: Wed, 31 Jan 2018 14:53:35 +0000
Subject: [PATCH] feat(ui): convert Icon to a styled component
---
packages/ui/src/atoms/Icon.js | 9 +++++++--
packages/ui/src/atoms/Icon.local.scss | 6 ------
2 files changed, 7 insertions(+), 8 deletions(-)
delete mode 100644 packages/ui/src/atoms/Icon.local.scss
diff --git a/packages/ui/src/atoms/Icon.js b/packages/ui/src/atoms/Icon.js
index d67e11c29..5d78520b4 100644
--- a/packages/ui/src/atoms/Icon.js
+++ b/packages/ui/src/atoms/Icon.js
@@ -1,7 +1,12 @@
import React from 'react'
import { pascalize } from 'humps'
import * as icons from 'react-feather'
-import classes from './Icon.local.scss'
+import styled from 'styled-components'
+
+const Container = styled.span`
+ display: inline-flex;
+ width: var(--icon-size);
+`
const Icon = ({ children, color = 'var(--color-local, black)', size = 24 }) => {
// convert `arrow_left` to `ArrowLeft`
@@ -10,7 +15,7 @@ const Icon = ({ children, color = 'var(--color-local, black)', size = 24 }) => {
// select the icon
const icon = icons[name]
- return <span className={classes.root}>{icon({ color, size })}</span>
+ return <Container>{icon({ color, size })}</Container>
}
export default Icon
diff --git a/packages/ui/src/atoms/Icon.local.scss b/packages/ui/src/atoms/Icon.local.scss
deleted file mode 100644
index dcf1c2ecb..000000000
--- a/packages/ui/src/atoms/Icon.local.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.root {
- // color of the icon is set by his parent
-
- display: inline-flex;
- width: var(--icon-size);
-}
--
GitLab