diff options
author | Fred Carlsen <fred@sjelfull.no> | 2018-12-15 03:41:50 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-15 03:41:50 +0800 |
commit | 04d4e797aa508bb8e45100db499907ae706c703d (patch) | |
tree | 12a55d0c79ab5c815a4ebc927c2f258853f8581f /packages/website/ts/@next/components/icon.tsx | |
parent | ceddc019853632f54dd803f5673e8688d38246ee (diff) | |
download | dexon-sol-tools-04d4e797aa508bb8e45100db499907ae706c703d.tar dexon-sol-tools-04d4e797aa508bb8e45100db499907ae706c703d.tar.gz dexon-sol-tools-04d4e797aa508bb8e45100db499907ae706c703d.tar.bz2 dexon-sol-tools-04d4e797aa508bb8e45100db499907ae706c703d.tar.lz dexon-sol-tools-04d4e797aa508bb8e45100db499907ae706c703d.tar.xz dexon-sol-tools-04d4e797aa508bb8e45100db499907ae706c703d.tar.zst dexon-sol-tools-04d4e797aa508bb8e45100db499907ae706c703d.zip |
Type fixes
Diffstat (limited to 'packages/website/ts/@next/components/icon.tsx')
-rw-r--r-- | packages/website/ts/@next/components/icon.tsx | 10 |
1 files changed, 6 insertions, 4 deletions
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx index 04479e80a..d9632a3c7 100644 --- a/packages/website/ts/@next/components/icon.tsx +++ b/packages/website/ts/@next/components/icon.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; import Loadable from 'react-loadable'; import styled from 'styled-components'; + +import {Paragraph} from 'ts/@next/components/text'; import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities'; interface IconProps extends PaddingInterface { - name: string; + name?: string; component?: React.ReactNode; size?: 'small' | 'medium' | 'large' | 'hero' | number; } @@ -13,7 +15,7 @@ export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => { if (props.name && !props.component) { const IconSVG = Loadable({ loader: async () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`), - loading: () => 'Loading', + loading: () => <Paragraph>Loading</Paragraph>, }); return ( @@ -34,7 +36,7 @@ export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => { return null; }; -export const InlineIconWrap = styled.div<IconProps>` +export const InlineIconWrap = styled.div<PaddingInterface>` margin: ${props => getCSSPadding(props.margin)}; display: flex; align-items: center; @@ -46,7 +48,7 @@ export const InlineIconWrap = styled.div<IconProps>` `; const _getSize = (size: string | number = 'small'): string => { - if (isNaN(size)) { + if (typeof size === 'string') { return `var(--${size}Icon)`; } |