From 16f69ad718173266bd31b26b49f573cc175aed38 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Mon, 10 Dec 2018 11:21:40 +0100
Subject: Refactors <Icon>

---
 packages/website/ts/@next/components/icon.tsx | 38 ++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 9 deletions(-)

(limited to 'packages/website/ts/@next/components/icon.tsx')

diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
index 28a8b3c60..2775601b0 100644
--- a/packages/website/ts/@next/components/icon.tsx
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -1,23 +1,43 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import IconCoin from 'ts/@next/icons/illustrations/coin.svg';
 
 interface Props {
-    icon: any;
+    name: string;
     size?: string;
 }
 
-export const IconClass: React.FunctionComponent<Props> = (props: Props) => {
+const ICONS = {
+    coin: IconCoin,
+};
+
+export const Icon: React.FunctionComponent<Props> = (props: Props) => {
+    const IconSVG = ICONS[props.name];
+
     return (
-        <div />
+        <StyledIcon {...props}>
+            <IconSVG />
+        </StyledIcon>
     );
 };
 
-export const Icon = styled(IconClass)`
-    margin: auto;
+const _getSize = (size: string | number = 'small'): string => {
+    if (isNaN(size)) {
+        return `var(--${size}Icon)`;
+    }
+
+    return `${size}px`;
+};
+
+const StyledIcon = styled.figure`
+    width: ${props => _getSize(props.size)};
+    height: ${props => _getSize(props.size)};
+    margin: 0;
     flex-shrink: 0;
 
-    ${(props: Props) => props.size && `
-        width: ${props.size};
-        height: auto;
-    `}
+    svg {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
 `;
-- 
cgit v1.2.3