@hipay/hipay-material-ui 3.4.1 → 3.5.0

package/src/hi-svg-icons/HiPriceGrid.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@material-ui/core/Icon';
+import {useTheme} from "@material-ui/core/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiPriceGrid = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <circle cx="11.83" cy="16.66" r="9" fill={color} opacity={0.16}/>
+                <path
+                    d="M5.2,8.17h9.89l-1.5,1.5H6.7v12h12V14.78l1.5-1.5v9.89H5.2ZM21,5.17a2.09,2.09,0,0,1,1.57.66,2.22,2.22,0,0,1,.63,1.59A2.25,2.25,0,0,1,22.54,9l-7.41,7.4-.18.19h-.24l-2.62.56L11,17.36l.19-1.08.56-2.62v-.24l.19-.18,7.4-7.41A2.17,2.17,0,0,1,21,5.17Zm0,1.5a.72.72,0,0,0-.52.24l-7.26,7.26-.29,1.32,1.32-.29,7.26-7.26a.64.64,0,0,0,0-1A.7.7,0,0,0,21,6.67Z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiPriceGrid.muiName = 'SvgIcon';
+
+export default HiPriceGrid;

package/src/hi-svg-icons/HiRoute.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@material-ui/core/Icon';
+import {useTheme} from "@material-ui/core/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiRoute = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <circle cx="11.83" cy="16.66" r="9" fill={color} opacity={0.16}/>
+                <path
+                    d="M18.23,5.57l1,1L16.4,9.4l2.54,2.54,2.85-2.8,1,1L20,13l1.65,1.6-1.07,1.07L20,15.11l-3.65,3.65a2.09,2.09,0,0,1-1.54.63,2.21,2.21,0,0,1-1.58-.63L11.9,17.43,6.64,22.77,5.57,21.71l5.35-5.26L9.58,15.11A2.26,2.26,0,0,1,9,13.53,2.12,2.12,0,0,1,9.58,12l3.66-3.66L12.7,7.8l1.07-1.07,1.61,1.65Zm-4,3.75L10.61,13a.85.85,0,0,0,0,1.16l3.61,3.61a.78.78,0,0,0,.58.22.79.79,0,0,0,.58-.22L19,14.08Z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiRoute.muiName = 'SvgIcon';
+
+export default HiRoute;

package/src/hi-svg-icons/HiSettlement.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@material-ui/core/Icon';
+import {useTheme} from "@material-ui/core/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiSettlement = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <circle cx="11.83" cy="16.66" r="9" fill={color} opacity={0.16}/>
+                <path
+                    d="M9.77,5.88,10.89,7l-3,3-.56.47L6.77,10,5.27,8.5,6.39,7.38l.94,1Zm0,6L10.89,13l-3,3-.56.47L6.77,16l-1.5-1.5,1.12-1.12.94,1Zm0,6L10.89,19l-3,3-.56.47L6.77,22l-1.5-1.5,1.12-1.12.94,1ZM13.33,7.19h9.75v1.5H13.33Zm0,6h9.75v1.5H13.33Zm0,6h9.75v1.5H13.33Z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiSettlement.muiName = 'SvgIcon';
+
+export default HiSettlement;

package/src/hi-svg-icons/HiSizeLarge.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@material-ui/core/Icon';
+import {useTheme} from "@material-ui/core/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiSizeLarge = pure((props) => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 18 18">
+                <path
+                    // eslint-disable-next-line max-len
+                    d="M17.4,0.6C17,0.2,16.5,0,16,0H2C1.5,0,1,0.2,0.6,0.6C0.2,1,0,1.5,0,2v14c0,0.6,0.2,1,0.6,1.4 C1,17.8,1.5,18,2,18h14c0.6,0,1-0.2,1.4-0.6C17.8,17,18,16.5,18,16V2C18,1.5,17.8,1,17.4,0.6z M12.2,14H5.8V4h2.1v8.3h4.4V14z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiSizeLarge.muiName = 'SvgIcon';
+
+export default HiSizeLarge;

package/src/hi-svg-icons/HiSizeMedium.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@material-ui/core/Icon';
+import {useTheme} from "@material-ui/core/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiSizeMedium = pure((props) => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 18 18">
+                <path
+                    // eslint-disable-next-line max-len
+                    d="M17.4,0.6C17,0.2,16.5,0,16,0H2C1.5,0,1,0.2,0.6,0.6C0.2,1,0,1.5,0,2v14c0,0.6,0.2,1,0.6,1.4 C1,17.8,1.5,18,2,18h14c0.6,0,1-0.2,1.4-0.6C17.8,17,18,16.5,18,16V2C18,1.5,17.8,1,17.4,0.6z M14.2,14h-2.1v-2.7l0.2-4.7L9.7,14 H8.3L5.6,6.6l0.2,4.7V14H3.8V4h2.7L9,11.2L11.5,4h2.7V14z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiSizeMedium.muiName = 'SvgIcon';
+
+export default HiSizeMedium;

package/src/hi-svg-icons/HiSizeSmall.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@material-ui/core/Icon';
+import {useTheme} from "@material-ui/core/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiSizeSmall = pure((props) => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 18 18">
+                <path
+                    // eslint-disable-next-line max-len
+                    d="M17.4,0.6C17,0.2,16.5,0,16,0H2C1.5,0,1,0.2,0.6,0.6C0.2,1,0,1.5,0,2v14c0,0.6,0.2,1,0.6,1.4 C1,17.8,1.5,18,2,18h14c0.6,0,1-0.2,1.4-0.6C17.8,17,18,16.5,18,16V2C18,1.5,17.8,1,17.4,0.6z M8,7.5c0.3,0.2,0.8,0.4,1.5,0.6 c0.5,0.2,1,0.4,1.4,0.6s0.8,0.4,1,0.7s0.5,0.6,0.6,0.9s0.2,0.7,0.2,1.1c0,0.4-0.1,0.8-0.3,1.2s-0.4,0.6-0.7,0.9 c-0.3,0.2-0.7,0.4-1.1,0.5c-0.4,0.1-0.9,0.2-1.5,0.2c-0.3,0-0.7,0-1-0.1c-0.3-0.1-0.6-0.1-0.9-0.3s-0.6-0.3-0.8-0.4S6,12.9,5.8,12.7 s-0.3-0.5-0.4-0.8c-0.1-0.3-0.2-0.6-0.2-1h2.1c0,0.3,0,0.6,0.1,0.8s0.2,0.4,0.4,0.5c0.2,0.1,0.4,0.2,0.6,0.3s0.5,0.1,0.8,0.1 c0.3,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.1,0.5-0.2s0.2-0.2,0.3-0.4c0.1-0.1,0.1-0.3,0.1-0.4c0-0.2,0-0.3-0.1-0.5 c-0.1-0.1-0.1-0.3-0.3-0.4s-0.3-0.2-0.6-0.3s-0.6-0.2-1-0.4C8.4,9.7,7.9,9.5,7.5,9.3S6.8,8.9,6.5,8.7C6.2,8.4,5.9,8.1,5.8,7.8 S5.5,7.1,5.5,6.7c0-0.4,0.1-0.8,0.3-1.1c0.2-0.3,0.4-0.6,0.8-0.9s0.7-0.4,1.2-0.6C8.1,4,8.6,3.9,9.2,3.9c0.6,0,1.1,0.1,1.5,0.2 c0.5,0.2,0.8,0.4,1.2,0.6s0.6,0.6,0.7,1c0.2,0.4,0.3,0.8,0.3,1.2h-2.1c0-0.2,0-0.4-0.1-0.6s-0.2-0.3-0.3-0.5s-0.3-0.2-0.5-0.3 C9.6,5.6,9.4,5.5,9.1,5.5c-0.3,0-0.5,0-0.7,0.1S8.1,5.8,7.9,5.9S7.7,6.1,7.6,6.2S7.5,6.5,7.5,6.7C7.5,7,7.7,7.3,8,7.5z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiSizeSmall.muiName = 'SvgIcon';
+
+export default HiSizeSmall;

package/src/hi-svg-icons/HiStore.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@material-ui/core/Icon';
+import {useTheme} from '@material-ui/core/styles';
+
+/**
+ * @ignore - internal component.
+ */
+const HiStore = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <circle cx="11.83" cy="16.66" r="9" fill={color} opacity={0.16}/>
+                <path
+                    d="M22.23,22.23H6.11V10.79L9.62,6.11h9.11l3.5,4.68ZM7.51,20.83H20.83V11.25L18,7.51H10.32L7.51,11.25Z"
+                    fill={color}
+                />
+                <path
+                    d="M9.17,14.87a3.08,3.08,0,0,1-3.06-3h0v-.09l1.4,0a1.72,1.72,0,0,0,3.44,0l1.4,0a3.07,3.07,0,0,1-3,3.13H9.17Z"
+                    fill={color}
+                />
+                <path
+                    d="M14,14.87a3.07,3.07,0,0,1-3.05-3h0v-.09l1.4,0a1.67,1.67,0,0,0,1.71,1.7,1.7,1.7,0,0,0,1.73-1.7l1.4,0a3.09,3.09,0,0,1-3,3.13H14Z"
+                    fill={color}
+                />
+                <path
+                    d="M19.12,14.87A3.12,3.12,0,0,1,16,11.76h1.4a1.72,1.72,0,0,0,1.72,1.71,1.71,1.71,0,0,0,1.71-1.71h1.4a3.11,3.11,0,0,1-3.11,3.12Z"
+                    fill={color}
+                />
+                <path
+                    d="M17,22.13H11.27V16.42H17Zm-4.31-1.4h2.91V17.82H12.67Z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiStore.muiName = 'SvgIcon';
+
+export default HiStore;

package/src/hi-svg-icons/HiStoreMenu.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@material-ui/core/Icon';
+import {useTheme} from '@material-ui/core/styles';
+
+/**
+ * @ignore - internal component.
+ */
+const HiStoreMenu = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <path
+                    d="M22.23,22.23H6.11V10.79L9.62,6.11h9.11l3.5,4.68ZM7.51,20.83H20.83V11.25L18,7.51H10.32L7.51,11.25Z"
+                    fill={color}
+                />
+                <path
+                    d="M9.17,14.87a3.08,3.08,0,0,1-3.06-3h0v-.09l1.4,0a1.72,1.72,0,0,0,3.44,0l1.4,0a3.07,3.07,0,0,1-3,3.13H9.17Z"
+                    fill={color}
+                />
+                <path
+                    d="M14,14.87a3.07,3.07,0,0,1-3.05-3h0v-.09l1.4,0a1.67,1.67,0,0,0,1.71,1.7,1.7,1.7,0,0,0,1.73-1.7l1.4,0a3.09,3.09,0,0,1-3,3.13H14Z"
+                    fill={color}
+                />
+                <path
+                    d="M19.12,14.87A3.12,3.12,0,0,1,16,11.76h1.4a1.72,1.72,0,0,0,1.72,1.71,1.71,1.71,0,0,0,1.71-1.71h1.4a3.11,3.11,0,0,1-3.11,3.12Z"
+                    fill={color}
+                />
+                <path
+                    d="M17,22.13H11.27V16.42H17Zm-4.31-1.4h2.91V17.82H12.67Z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiStoreMenu.muiName = 'SvgIcon';
+
+export default HiStoreMenu;

package/src/hi-svg-icons/HiTransaction.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@material-ui/core/Icon';
+import {useTheme} from "@material-ui/core/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiTransaction = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <circle cx="11.83" cy="16.66" r="9" fill={color} opacity={0.16}/>
+                <path
+                    d="M4.42,6.2l1.32.52,16.5,6.75,1.68.7-1.68.71L5.74,21.63l-1.32.51.28-1.4,1.5-6.57L4.7,7.61ZM6.49,8.64l1,4.78H18.11Zm1,6.28-1,4.78,11.62-4.78Z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiTransaction.muiName = 'SvgIcon';
+
+export default HiTransaction;

package/src/hi-svg-icons/HiTransactionMenu.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@material-ui/core/Icon';
+import {useTheme} from "@material-ui/core/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiTransactionMenu = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <path
+                    d="M4.42,6.2l1.32.52,16.5,6.75,1.68.7-1.68.71L5.74,21.63l-1.32.51.28-1.4,1.5-6.57L4.7,7.61ZM6.49,8.64l1,4.78H18.11Zm1,6.28-1,4.78,11.62-4.78Z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiTransactionMenu.muiName = 'SvgIcon';
+
+export default HiTransactionMenu;

package/src/hi-svg-icons/HiUser.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@material-ui/core/Icon';
+import {useTheme} from "@material-ui/core/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiUser = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <circle cx="11.83" cy="16.66" r="9" fill={color} opacity={0.16}/>
+                <path
+                    d="M10.47,7.47a5.2,5.2,0,0,1,7.41,0,5.05,5.05,0,0,1,1.54,3.7,5.17,5.17,0,0,1-.63,2.49,5.05,5.05,0,0,1-1.71,1.87,7.74,7.74,0,0,1,3.33,2.74,7.23,7.23,0,0,1,1.26,4.15h-1.5a6,6,0,0,0-6-6,6,6,0,0,0-6,6H6.67a7.24,7.24,0,0,1,1.27-4.15,7.63,7.63,0,0,1,3.33-2.74,5.27,5.27,0,0,1-2.35-4.36A5.06,5.06,0,0,1,10.47,7.47Zm6.35,1a3.74,3.74,0,0,0-5.3,0,3.74,3.74,0,0,0,0,5.3,3.74,3.74,0,0,0,5.3,0,3.59,3.59,0,0,0,1.1-2.65A3.6,3.6,0,0,0,16.82,8.52Z"                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiUser.muiName = 'SvgIcon';
+
+export default HiUser;

package/src/hi-svg-icons/HiVendor.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@material-ui/core/Icon';
+import {useTheme} from "@material-ui/core/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiVendor = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <circle cx="11.83" cy="16.66" r="9" fill={color} opacity={0.16}/>
+                <path
+                    d="M5.64,6.67H7.33A1.41,1.41,0,0,1,8.24,7a1.28,1.28,0,0,1,.5.82l2,7.87h9.38l1.78-6.75h1.59l-2,7.13a1.31,1.31,0,0,1-.5.82,1.46,1.46,0,0,1-.91.3H10.7a1.48,1.48,0,0,1-.91-.3,1.25,1.25,0,0,1-.49-.82l-2-7.88H5.64a.75.75,0,1,1,0-1.5ZM10.8,17.83a2.26,2.26,0,0,1,3.19,0A2.26,2.26,0,0,1,10.8,21a2.26,2.26,0,0,1,0-3.19Zm2.34,1.59a.66.66,0,0,0-.75-.75.75.75,0,0,0,0,1.5A.66.66,0,0,0,13.14,19.42Zm1.5-12.75h1.5V8.92h2.25v1.5H16.14v2.25h-1.5V10.42H12.39V8.92h2.25Zm2.91,11.16a2.26,2.26,0,0,1,3.19,0A2.26,2.26,0,0,1,17.55,21a2.26,2.26,0,0,1,0-3.19Zm2.34,1.59a.75.75,0,1,0-.75.75A.66.66,0,0,0,19.89,19.42Z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiVendor.muiName = 'SvgIcon';
+
+export default HiVendor;

package/src/hi-svg-icons/HiWidget.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@material-ui/core/Icon';
+import {useTheme} from "@material-ui/core/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiWidget = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <circle cx="11.83" cy="16.66" r="9" fill={color} opacity={0.16}/>
+                <path
+                    d="M14.17,5l4.18,4.18h2.5A1.59,1.59,0,0,1,22,9.66a1.55,1.55,0,0,1,.47,1.17V21.69a1.61,1.61,0,0,1-1.64,1.64H7.49a1.55,1.55,0,0,1-1.17-.47,1.59,1.59,0,0,1-.47-1.17V10.83A1.61,1.61,0,0,1,7.49,9.19H10ZM7.49,10.83V21.69H20.85V10.83ZM9.17,15v-2.5h4.18V15ZM10,20V16.69h4.18V20ZM14.21,7.08,12.1,9.19h4.18Zm1.64,12.11V13.33h3.32v5.86Z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiWidget.muiName = 'SvgIcon';
+
+export default HiWidget;

package/src/hi-svg-icons/README.md

@@ -0,0 +1,109 @@
+The icons provided here are intended for use internally within HiPay applications.
+
+```js
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+
+import HiAccount from '../hi-svg-icons/HiAccount';
+import HiActivity from '../hi-svg-icons/HiActivity';
+import HiAll from '../hi-svg-icons/HiAll';
+import HiBilling from '../hi-svg-icons/HiBilling';
+import HiBriefcaseRescue from '../hi-svg-icons/HiBriefcaseRescue';
+import HiCatalog from '../hi-svg-icons/HiCatalog';
+import HiDownload from '../hi-svg-icons/HiDownload';
+import HiFinance from '../hi-svg-icons/HiFinance';
+import HiPermission from '../hi-svg-icons/HiPermission';
+import HiRoute from '../hi-svg-icons/HiRoute';
+import HiSettlement from '../hi-svg-icons/HiSettlement';
+import HiTransaction from '../hi-svg-icons/HiTransaction';
+import HiUser from '../hi-svg-icons/HiUser';
+import HiWidget from '../hi-svg-icons/HiWidget';
+import HiIntelligence from '../hi-svg-icons/HiIntelligence';
+import HiOrder from '../hi-svg-icons/HiOrder';
+import HiPaymentOrder from '../hi-svg-icons/HiPaymentOrder';
+import HiPriceGrid from '../hi-svg-icons/HiPriceGrid';
+import HiStore from '../hi-svg-icons/HiStore';
+import HiVendor from '../hi-svg-icons/HiVendor';
+
+import HiIntelligenceMenu from '../hi-svg-icons/HiIntelligenceMenu';
+import HiStoreMenu from '../hi-svg-icons/HiStoreMenu';
+import HiTransactionMenu from '../hi-svg-icons/HiTransactionMenu';
+
+import HiSizeLarge from '../hi-svg-icons/HiSizeLarge';
+import HiSizeMedium from '../hi-svg-icons/HiSizeMedium';
+import HiSizeSmall from '../hi-svg-icons/HiSizeSmall';
+
+import HiLogoRounded from '../hi-svg-icons/HiLogoRounded';
+
+
+const useStyles = makeStyles(theme => ({
+   root: {
+       ...theme.typography.body3,
+   },
+   primary: {
+       color: theme.palette.primary.main
+   },
+   secondary: {
+       color: theme.palette.secondary.main
+   },
+   negative: {
+       color: theme.palette.negative.main
+   }
+}));
+
+function HiSvgIcons(props) {
+    const classes = useStyles(props);
+    return (
+        <ul className={classes.root}>
+            <li>
+                <h1>MODULES</h1>
+                <ul className={classes.primary}>
+                    <li><HiCatalog size={40} color="currentColor" /> : HiCatalog</li>
+                    <li><HiFinance size={40} color="currentColor" /> : HiFinance</li>
+                    <li><HiIntelligence size={40} color="currentColor" /> : HiIntelligence</li>
+                    <li><HiPriceGrid size={40} color="currentColor" /> : HiPriceGrid</li>
+                    <li><HiSettlement size={40} color="currentColor" /> : HiSettlement</li>
+                    <li><HiStore size={40} color="currentColor" /> : HiStore</li>
+                    <li><HiTransaction size={40} color="currentColor" /> : HiTransaction</li>
+                    <li><HiUser size={40} color="currentColor" /> : HiUser</li>
+                    <li><HiVendor size={40} color="currentColor" /> : HiVendor</li>
+                    <li><HiWidget size={40} color="currentColor" /> : HiWidget</li>
+                </ul>
+            </li>
+            <li>
+                <h1>MENU</h1>
+                <ul>
+                    <li><HiIntelligenceMenu size={40} /> : HiIntelligenceMenu</li>
+                    <li><HiStoreMenu size={40} /> : HiStoreMenu</li>
+                    <li><HiTransactionMenu size={40} /> : HiTransactionMenu</li>
+                    <li><HiLogoRounded size={40} /> : HiLogoRounded</li>
+                </ul>
+            </li>
+            <li>
+                <h1>OTHERS</h1>
+                <ul className={classes.secondary}>
+                    <li><HiAccount size={40} color="currentColor" /> : HiAccount</li>
+                    <li><HiBilling size={40} color="currentColor" /> : HiBilling</li>
+                    <li><HiOrder size={40} color="currentColor" /> : HiOrder</li>
+                    <li><HiPaymentOrder size={40} color="currentColor" /> : HiPaymentOrder</li>
+                    <li><HiRoute size={40} color="currentColor" /> : HiRoute</li>
+                    <li><HiDownload size={40} color="currentColor" /> : HiDownload</li>
+                    <li><HiBriefcaseRescue size={40} color="currentColor" /> : HiBriefcaseRescue</li>
+                    <li><HiSizeLarge size={40} color="currentColor" /> : HiSizeLarge</li>
+                    <li><HiSizeMedium size={40} color="currentColor" /> : HiSizeMedium</li>
+                    <li><HiSizeSmall size={40} color="currentColor" /> : HiSizeSmall</li>
+                </ul>
+            </li>
+            <li>
+                <h1>TO REDO</h1>
+                <ul className={classes.negative}>
+                    <li><HiActivity size={40} color="currentColor" /> : HiActivity</li>
+                    <li><HiAll size={40} color="currentColor" /> : HiAll</li>
+                    <li><HiPermission size={40} color="currentColor" /> : HiPermission</li>
+                </ul>
+            </li>
+        </ul>
+    );
+}
+;<HiSvgIcons/>
+```

package/src/hi-svg-icons/index.js

@@ -0,0 +1,27 @@
+export { default as HiAccount } from './HiAccount';
+export { default as HiAll } from './HiAll';
+export { default as HiBilling } from './HiBilling';
+export { default as HiBriefcaseRescue } from './HiBriefcaseRescue';
+export { default as HiCatalog } from './HiCatalog';
+export { default as HiCustomer } from './HiCustomer';
+export { default as HiFinance } from './HiFinance';
+export { default as HiRoute } from './HiRoute';
+export { default as HiSettlement } from './HiSettlement';
+export { default as HiSizeLarge } from './HiSizeLarge';
+export { default as HiSizeMedium } from './HiSizeMedium';
+export { default as HiSizeSmall } from './HiSizeSmall';
+export { default as HiTransaction } from './HiTransaction';
+export { default as HiTransactionMenu } from './HiTransactionMenu';
+export { default as HiUser } from './HiUser';
+export { default as HiWidget } from './HiWidget';
+export { default as HiActivity } from './HiActivity';
+export { default as HiPermission } from './HiPermission';
+export { default as HiPriceGrid } from './HiPriceGrid';
+export { default as HiDownload } from './HiDownload';
+export { default as HiIntelligence } from './HiIntelligence';
+export { default as HiIntelligenceMenu } from './HiIntelligenceMenu';
+export { default as HiOrder } from './HiOrder';
+export { default as HiStore } from './HiStore';
+export { default as HiPaymentOrder } from './HiPaymentOrder';
+export { default as HiVendor } from './HiVendor';
+export { default as HiLogoRounded } from './HiLogoRounded';

package/src/hi-svg-icons/index.test.js

@@ -0,0 +1,43 @@
+import fs from 'fs';
+import path from 'path';
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow } from '../test-utils';
+
+describe('hi-svg-icons', () => {
+    let shallow;
+
+    before(() => {
+        shallow = createShallow();
+    });
+
+    it('should be able to render all of them', done => {
+        // This test can only be run on the node env
+        if (!fs.readdir) {
+            done();
+            return;
+        }
+
+        fs.readdir(__dirname, (err, files) => {
+            files.forEach(file => {
+                // Ignore no js files and tests
+                if (file.indexOf('.js') === -1 || file.indexOf('text.js') > -1) {
+                    return;
+                }
+
+                // eslint-disable-next-line global-require, import/no-dynamic-require
+                const fileLoaded = require(path.join(__dirname, file));
+
+                if (!fileLoaded.default) {
+                    return;
+                }
+
+                const Icon = fileLoaded.default;
+                const wrapper = shallow(<Icon className="foo" />);
+                assert.strictEqual(wrapper.hasClass('foo'), true);
+            });
+
+            done();
+        });
+    });
+});

package/src/hi-svg-images/HiLogo.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import pure from 'recompose/pure';
+
+/**
+ * @ignore - internal component.
+ */
+const HiLogo = pure(props => {
+    return (
+        <svg viewBox="0 0 788.05 451.45" width="100%" {...props}>
+            <path
+                fill="#00ade9"
+                d="M288.84 117.53a19.9 19.9 0 00-22.74-2.37 710.68 710.68 0 01-82.57 39.71C201.92 84.49 219.32 26.53 219.6 25.6a19.87 19.87 0 10-38-11.45c-.32 1-22.26 74.14-43.11 156.53a426.51 426.51 0 01-48.87 11.67c-4.56.8-8.89 1.46-13 2a1440.07 1440.07 0 0143.5-143.68 19.87 19.87 0 00-37.2-14 1438.29 1438.29 0 00-47.87 160.16 99.22 99.22 0 01-11.81-1A19.87 19.87 0 1016.51 225c1.45.25 4.81.76 10 1.15-3 15.08-5.74 30.44-8 45.83a19.87 19.87 0 1039.3 5.89c2.64-17.58 5.88-35.19 9.48-52.44 8.68-.8 18.42-2.05 29.19-3.93q15.38-2.69 31.21-6.65c-5.14 21.79-9.94 43.45-14 63.89a19.87 19.87 0 1039 7.72c5.33-26.92 12-56 19-84.76a653.51 653.51 0 0067.15-27.7c-4.92 13.74-9.61 27.78-13.37 41-4.95 17.39-7.68 31.24-8.36 42.33-1.16 19.06 4.06 32.2 15.53 39.06a19.87 19.87 0 0024.12-31.24c-.42-4-.23-16.52 9.84-49 8-25.94 19.4-55.09 27.7-76.38a19.87 19.87 0 00-5.46-22.24zM522.37 78.05c-3.31-17.28-13.12-31.6-28.37-41.42-21.67-14-54.74-19.25-98.29-15.76a399.66 399.66 0 00-56.64 8.69 19.87 19.87 0 009.35 38.62c.06 0 1.83-.43 4.9-1.08q-4.63 20.18-9.3 40.36-7.83 33.8-15.73 67.56c-8.84 2.49-14.25 3.82-14.41 3.86a19.86 19.86 0 004.2 39.16c-1.12 4.69-2.23 9.38-3.36 14.07-3.73 15.44-7.38 30.91-11.61 46.22-2.86 10.35 3.54 22.8 14.35 25.26s22.19-3.26 25.25-14.34c7.6-27.49 14-55.36 20.46-83.16 17.56-5.56 39-13.05 60.32-22.23 29.5-12.72 52.69-26.14 68.94-39.9 30.27-25.64 32.99-49.96 29.94-65.91zm-55.51 35.49c-13.18 11.19-32.93 22.51-58.71 33.65-11.56 5-23.27 9.48-34.34 13.4Q384 117.08 394 73.52q1.49-6.43 3-12.88l2.52-.2c33.44-2.62 59.39.79 73.07 9.62 6.22 4 9.56 8.77 10.84 15.47 1.44 7.99-4.11 17.47-16.57 28.01zM680.18 451.45a20.55 20.55 0 01-2.46-.15 19.87 19.87 0 01-17.29-22.15c4.69-38.09 23.1-97.5 42-151.52a181.77 181.77 0 01-4.15 3.58c-19.52 16.26-37 23.44-53.43 22-13.48-1.23-24.34-8.09-30.57-19.32a43.31 43.31 0 01-2.61-5.64 140.32 140.32 0 01-44.42 22.89c-13 4-29.63 7.27-42.15-2.9a28.14 28.14 0 01-7.82-9.9 112.84 112.84 0 01-16.65 9.62c-20.55 9.39-34.59 5.71-42.75 1-15.67-9.11-22.29-29.68-16.46-51.18a164.63 164.63 0 0126-53.65c24.52-33.77 48.95-51.11 72.61-51.56 17-.33 29.92 8.38 35.86 15.94a19.88 19.88 0 012.25 21c-5.53 11.43-19.77 44.9-22.88 69.2q-.06.62-.15 1.23c-.11 1-.21 2-.28 2.91-.18 2.47-.4 4.8-.6 7-.11 1.2-.23 2.51-.34 3.83l1.69-.5c28.32-8.67 47.3-27.8 59.82-47.22q2-6.66 4.52-13.9a433 433 0 0119.78-47 19.87 19.87 0 0137.34 12.22 204.1 204.1 0 01-19.9 55.85q-2.38 4.51-5 8.82c-5 18.68-4.62 28.33-3.6 31.72 2.72.14 20.77-1.25 60.6-52.1a624.13 624.13 0 0041.86-61.3 19.87 19.87 0 0135.54 17.57c-.75 1.88-77.07 188.16-86.67 266.16a19.87 19.87 0 01-19.69 17.45zm-147.6-266.69c-7 3.59-18.11 12.18-33 32.63a125.07 125.07 0 00-19.83 40.71 18.63 18.63 0 00-.69 5.47c4.83-1.27 16.73-6.34 37.75-26.35 3.25-18.37 10-37.9 15.77-52.46zm12.74-1z"
+            />
+            <ellipse
+                cx={285.79}
+                cy={66.13}
+                rx={22.1}
+                ry={22.93}
+                transform="rotate(-45 285.784 66.134)"
+                fill="#ffcf21"
+            />
+        </svg>
+    );
+});
+
+HiLogo.muiName = 'SvgImage';
+
+export default HiLogo;

package/src/hi-svg-images/HiLogoWhite.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import pure from 'recompose/pure';
+
+/**
+ * @ignore - internal component.
+ */
+const HiLogoWhite = pure(props => {
+    return (
+        <svg viewBox="0 0 788.05 451.45" width="100%" {...props}>
+            <path
+                fill="#fff"
+                d="M288.84 117.53a19.9 19.9 0 00-22.74-2.37 710.68 710.68 0 01-82.57 39.71C201.92 84.49 219.32 26.53 219.6 25.6a19.87 19.87 0 10-38-11.45c-.32 1-22.26 74.14-43.11 156.53a426.51 426.51 0 01-48.87 11.67c-4.56.8-8.89 1.46-13 2a1440.07 1440.07 0 0143.5-143.68 19.87 19.87 0 00-37.2-14 1438.29 1438.29 0 00-47.87 160.16 99.22 99.22 0 01-11.81-1A19.87 19.87 0 1016.51 225c1.45.25 4.81.76 10 1.15-3 15.08-5.74 30.44-8 45.83a19.87 19.87 0 1039.3 5.89c2.64-17.58 5.88-35.19 9.48-52.44 8.68-.8 18.42-2.05 29.19-3.93q15.38-2.69 31.21-6.65c-5.14 21.79-9.94 43.45-14 63.89a19.87 19.87 0 1039 7.72c5.33-26.92 12-56 19-84.76a653.51 653.51 0 0067.15-27.7c-4.92 13.74-9.61 27.78-13.37 41-4.95 17.39-7.68 31.24-8.36 42.33-1.16 19.06 4.06 32.2 15.53 39.06a19.87 19.87 0 0024.12-31.24c-.42-4-.23-16.52 9.84-49 8-25.94 19.4-55.09 27.7-76.38a19.87 19.87 0 00-5.46-22.24zM522.37 78.05c-3.31-17.28-13.12-31.6-28.37-41.42-21.67-14-54.74-19.25-98.29-15.76a399.66 399.66 0 00-56.64 8.69 19.87 19.87 0 009.35 38.62c.06 0 1.83-.43 4.9-1.08q-4.63 20.18-9.3 40.36-7.83 33.8-15.73 67.56c-8.84 2.49-14.25 3.82-14.41 3.86a19.86 19.86 0 004.2 39.16c-1.12 4.69-2.23 9.38-3.36 14.07-3.73 15.44-7.38 30.91-11.61 46.22-2.86 10.35 3.54 22.8 14.35 25.26s22.19-3.26 25.25-14.34c7.6-27.49 14-55.36 20.46-83.16 17.56-5.56 39-13.05 60.32-22.23 29.5-12.72 52.69-26.14 68.94-39.9 30.27-25.64 32.99-49.96 29.94-65.91zm-55.51 35.49c-13.18 11.19-32.93 22.51-58.71 33.65-11.56 5-23.27 9.48-34.34 13.4Q384 117.08 394 73.52q1.49-6.43 3-12.88l2.52-.2c33.44-2.62 59.39.79 73.07 9.62 6.22 4 9.56 8.77 10.84 15.47 1.44 7.99-4.11 17.47-16.57 28.01zM680.18 451.45a20.55 20.55 0 01-2.46-.15 19.87 19.87 0 01-17.29-22.15c4.69-38.09 23.1-97.5 42-151.52a181.77 181.77 0 01-4.15 3.58c-19.52 16.26-37 23.44-53.43 22-13.48-1.23-24.34-8.09-30.57-19.32a43.31 43.31 0 01-2.61-5.64 140.32 140.32 0 01-44.42 22.89c-13 4-29.63 7.27-42.15-2.9a28.14 28.14 0 01-7.82-9.9 112.84 112.84 0 01-16.65 9.62c-20.55 9.39-34.59 5.71-42.75 1-15.67-9.11-22.29-29.68-16.46-51.18a164.63 164.63 0 0126-53.65c24.52-33.77 48.95-51.11 72.61-51.56 17-.33 29.92 8.38 35.86 15.94a19.88 19.88 0 012.25 21c-5.53 11.43-19.77 44.9-22.88 69.2q-.06.62-.15 1.23c-.11 1-.21 2-.28 2.91-.18 2.47-.4 4.8-.6 7-.11 1.2-.23 2.51-.34 3.83l1.69-.5c28.32-8.67 47.3-27.8 59.82-47.22q2-6.66 4.52-13.9a433 433 0 0119.78-47 19.87 19.87 0 0137.34 12.22 204.1 204.1 0 01-19.9 55.85q-2.38 4.51-5 8.82c-5 18.68-4.62 28.33-3.6 31.72 2.72.14 20.77-1.25 60.6-52.1a624.13 624.13 0 0041.86-61.3 19.87 19.87 0 0135.54 17.57c-.75 1.88-77.07 188.16-86.67 266.16a19.87 19.87 0 01-19.69 17.45zm-147.6-266.69c-7 3.59-18.11 12.18-33 32.63a125.07 125.07 0 00-19.83 40.71 18.63 18.63 0 00-.69 5.47c4.83-1.27 16.73-6.34 37.75-26.35 3.25-18.37 10-37.9 15.77-52.46zm12.74-1z"
+            />
+            <ellipse
+                cx={285.79}
+                cy={66.13}
+                rx={22.1}
+                ry={22.93}
+                transform="rotate(-45 285.784 66.134)"
+                fill="#ffcf21"
+            />
+        </svg>
+    );
+});
+
+HiLogoWhite.muiName = 'SvgImage';
+
+export default HiLogoWhite;