diff options
Diffstat (limited to 'packages/website/ts/@next/components/icon.tsx')
-rw-r--r-- | packages/website/ts/@next/components/icon.tsx | 33 |
1 files changed, 23 insertions, 10 deletions
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx index 84d9f4cb4..e3ad83c94 100644 --- a/packages/website/ts/@next/components/icon.tsx +++ b/packages/website/ts/@next/components/icon.tsx @@ -5,20 +5,33 @@ import {getCSSPadding, PaddingInterface} from 'ts/@next/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) => { - const IconSVG = Loadable({ - loader: () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`), - loading: () => 'Loading', - }); - - return ( - <StyledIcon {...props}> - <IconSVG /> - </StyledIcon> - ); + if (props.name && !props.component) { + const IconSVG = Loadable({ + loader: () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`), + loading: () => 'Loading', + }); + + return ( + <StyledIcon {...props}> + <IconSVG /> + </StyledIcon> + ); + } + + if (props.component) { + return ( + <StyledIcon {...props}> + {props.component} + </StyledIcon> + ); + } + + return null; }; export const InlineIconWrap = styled.div<IconProps>` |