Async load icons, adds margins

4 files changed, 30 insertions, 12 deletions

diff --git a/packages/website/package.json b/packages/website/package.json
index a214acabd..4401c494b 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -31,8 +31,8 @@
         "@0x/types": "^1.3.0",
         "@0x/typescript-typings": "^3.0.4",
         "@0x/utils": "^2.0.6",
-        "@types/styled-components": "^4.1.1",
         "@0x/web3-wrapper": "^3.1.6",
+        "@types/styled-components": "^4.1.1",
         "accounting": "^0.4.1",
         "basscss": "^8.0.3",
         "blockies": "^0.0.2",
@@ -55,6 +55,7 @@
         "react-document-title": "^2.0.3",
         "react-dom": "^16.4.2",
         "react-helmet": "^5.2.0",
+        "react-loadable": "^5.5.0",
         "react-popper": "^1.0.0-beta.6",
         "react-redux": "^5.0.3",
         "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state",
@@ -82,8 +83,8 @@
         "@types/node": "*",
         "@types/numeral": "^0.0.22",
         "@types/query-string": "^5.1.0",
-        "@types/react": "^16.7.7",
         "@types/rc-slider": "^8.6.0",
+        "@types/react": "^16.7.7",
         "@types/react-copy-to-clipboard": "^4.2.0",
         "@types/react-dom": "^16.0.7",
         "@types/react-helmet": "^5.0.6",
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
index 8dfede88c..60e27f07e 100644
--- a/packages/website/ts/@next/components/icon.tsx
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -1,18 +1,19 @@
 import * as React from 'react';
+import Loadable from 'react-loadable';
 import styled from 'styled-components';
-import IconCoin from 'ts/@next/icons/illustrations/coin.svg';
+import {getCSSPadding} from 'ts/@next/constants/utilities';
 
-interface Props {
+interface IconProps {
     name: string;
+    margin?: Array<'small' | 'default' | 'large' | number> | number;
     size?: 'small' | 'medium' | 'large' | number;
 }
 
-const ICONS = {
-    coin: IconCoin,
-};
-
 export const Icon: React.FunctionComponent<Props> = (props: Props) => {
-    const IconSVG = ICONS[props.name];
+    const IconSVG = Loadable({
+        loader: () => import(`ts/@next/icons/illustrations/${props.name}.svg`),
+        loading: () => 'Loading',
+    });
 
     return (
         <StyledIcon {...props}>
@@ -21,6 +22,17 @@ export const Icon: React.FunctionComponent<Props> = (props: Props) => {
     );
 };
 
+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)`;
diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx
index 35956c47b..74f121e49 100644
--- a/packages/website/ts/@next/constants/utilities.tsx
+++ b/packages/website/ts/@next/constants/utilities.tsx
@@ -1,5 +1,5 @@
 export interface PaddingInterface {
-    padding?: number | Array<'large' | 'default' | number>;
+    padding?: number | Array<'large' | 'default', 'small' | number>;
 }
 
 interface PaddingSizes {
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index d4ad55b9d..b884c3545 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import {colors} from 'ts/style/colors';
 
 import {Button, ButtonWrap} from 'ts/@next/components/button';
-import {Icon} from 'ts/@next/components/icon';
+import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
 import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
 import {SiteWrap} from 'ts/@next/components/siteWrap';
 import {Heading, Paragraph} from 'ts/@next/components/text';
@@ -94,7 +94,12 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
 
         <Section bgColor={colors.backgroundDark} isPadLarge={true}>
             <WrapCentered width="narrow">
-                <Icon name="coin" size="small" />
+                <InlineIconWrap>
+                    <Icon name="coin" size="small" />
+                    <Icon name="coin" size="small" />
+                    <Icon name="coin" size="small" />
+                    <Icon name="coin" size="small" />
+                </InlineIconWrap>
 
                 <Paragraph
                     size="large"