From ef403108fb0f5ed2798bc7eb59fa487c323ac1fb Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 14:59:22 +0100
Subject: Edits CTA landing section

---
 packages/website/ts/@next/components/icon.tsx | 33 +++++++++++++++++++--------
 1 file changed, 23 insertions(+), 10 deletions(-)

(limited to 'packages/website/ts/@next/components/icon.tsx')

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>`
-- 
cgit v1.2.3