import * as React from 'react'; import Loadable from 'react-loadable'; import styled from 'styled-components'; import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities'; interface IconProps extends PaddingInterface { name: string; size?: 'small' | 'medium' | 'large' | 'hero' | number; } export const Icon: React.FunctionComponent = (props: IconProps) => { const IconSVG = Loadable({ loader: () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`), loading: () => 'Loading', }); return ( ); }; export const InlineIconWrap = styled.div` 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 (isNaN(size)) { return `var(--${size}Icon)`; } return `${size}px`; }; const StyledIcon = styled.figure` 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; } `;