diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-03 07:17:26 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-03 07:17:26 +0800 |
commit | 65af195054e1f6de41d36a2d30d8342bef9752c0 (patch) | |
tree | 8559d71d6dd4269139afa5334b317f6efe90acd3 /packages/website/ts/components/icon.tsx | |
parent | 9f47f90c6e80ba9a61bcb6065fed1e2c6be8c5b7 (diff) | |
parent | 1ddf1087dd327b2ef35165518ee91eb457b84174 (diff) | |
download | dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.gz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.bz2 dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.lz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.xz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.zst dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.zip |
Merge branch 'development' into feature/monorepo/release-notes
Diffstat (limited to 'packages/website/ts/components/icon.tsx')
-rw-r--r-- | packages/website/ts/components/icon.tsx | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/packages/website/ts/components/icon.tsx b/packages/website/ts/components/icon.tsx new file mode 100644 index 000000000..165e999b9 --- /dev/null +++ b/packages/website/ts/components/icon.tsx @@ -0,0 +1,72 @@ +import * as React from 'react'; +import Loadable from 'react-loadable'; +import styled from 'styled-components'; + +import { Paragraph } from 'ts/components/text'; +import { getCSSPadding, PaddingInterface } from 'ts/constants/utilities'; + +interface IconProps extends PaddingInterface { + name?: string; + component?: React.ReactNode; + size?: 'small' | 'medium' | 'large' | 'hero' | number; +} + +export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => { + if (props.name && !props.component) { + const IconSVG = Loadable({ + loader: async () => import(/* webpackChunkName: "icon" */ `ts/icons/illustrations/${props.name}.svg`), + loading: () => <Paragraph>Loading</Paragraph>, + }); + + return ( + <StyledIcon {...props}> + <IconSVG /> + </StyledIcon> + ); + } + + if (props.component) { + return <StyledIcon {...props}>{props.component}</StyledIcon>; + } + + return null; +}; + +export const InlineIconWrap = + styled.div < + PaddingInterface > + ` + margin: ${props => getCSSPadding(props.margin)}; + display: flex; + align-items: center; + justify-content: center; + + > figure { + margin: 0 5px; + } +`; + +const _getSize = (size: string | number = 'small'): string => { + if (typeof size === 'string') { + return `var(--${size}Icon)`; + } + + return `${size}px`; +}; + +const StyledIcon = + styled.figure < + IconProps > + ` + width: ${props => _getSize(props.size)}; + height: ${props => _getSize(props.size)}; + margin: ${props => getCSSPadding(props.margin)}; + display: inline-block; + flex-shrink: 0; + + svg { + width: 100%; + height: 100%; + object-fit: cover; + } +`; |