diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-10 18:21:40 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-10 18:22:00 +0800 |
commit | 16f69ad718173266bd31b26b49f573cc175aed38 (patch) | |
tree | 5b9a2e74b9a0045b059b4e580104c2ed08c4997c /packages/website/ts/@next/components/icon.tsx | |
parent | 03ca8256398f2b178381c43aa0f3d648b4dba752 (diff) | |
download | dexon-sol-tools-16f69ad718173266bd31b26b49f573cc175aed38.tar dexon-sol-tools-16f69ad718173266bd31b26b49f573cc175aed38.tar.gz dexon-sol-tools-16f69ad718173266bd31b26b49f573cc175aed38.tar.bz2 dexon-sol-tools-16f69ad718173266bd31b26b49f573cc175aed38.tar.lz dexon-sol-tools-16f69ad718173266bd31b26b49f573cc175aed38.tar.xz dexon-sol-tools-16f69ad718173266bd31b26b49f573cc175aed38.tar.zst dexon-sol-tools-16f69ad718173266bd31b26b49f573cc175aed38.zip |
Refactors <Icon>
Diffstat (limited to 'packages/website/ts/@next/components/icon.tsx')
-rw-r--r-- | packages/website/ts/@next/components/icon.tsx | 38 |
1 files changed, 29 insertions, 9 deletions
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; + } `; |