feat(component): icon components

packages/big-design/src/components/Icons/CheckIcon.tsx

@@ -0,0 +1,31 @@
+// **********************************
+// Auto-generated file, do NOT modify
+// **********************************
+import React from 'react';
+
+import { Icon } from './Icon';
+
+export default class SvgCheckIcon extends Icon {
+  render() {
+    const { title, theme, ...rest } = this.props;
+    const size = this.getSize();
+    const style = {
+      width: size,
+      height: size,
+    };
+    const props = { ...rest, style };
+
+    return (
+      <svg width={size} height={size} viewBox="0 0 10 10" fill="none" {...props}>
+        <title>{title}</title>
+        <path
+          d="M1 6.105L3.667 8 9 2"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+}

packages/big-design/src/components/Icons/DropdownIcon.tsx

@@ -0,0 +1,30 @@
+// **********************************
+// Auto-generated file, do NOT modify
+// **********************************
+import React from 'react';
+
+import { Icon } from './Icon';
+
+export default class SvgDropdownIcon extends Icon {
+  render() {
+    const { title, theme, ...rest } = this.props;
+    const size = this.getSize();
+    const style = {
+      width: size,
+      height: size,
+    };
+    const props = { ...rest, style };
+
+    return (
+      <svg width={size} height={size} viewBox="0 0 20 20" fill="none" {...props}>
+        <title>{title}</title>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.04 8a.5.5 0 0 0-.39.812l2.96 3.7c.2.25.58.25.78 0l2.96-3.7A.5.5 0 0 0 12.96 8H7.04z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+}

packages/big-design/src/components/Icons/ErrorIcon.tsx

@@ -0,0 +1,29 @@
+// **********************************
+// Auto-generated file, do NOT modify
+// **********************************
+import React from 'react';
+
+import { Icon } from './Icon';
+
+export default class SvgErrorIcon extends Icon {
+  render() {
+    const { title, theme, ...rest } = this.props;
+    const size = this.getSize();
+    const style = {
+      width: size,
+      height: size,
+    };
+    const props = { ...rest, style };
+
+    return (
+      <svg width={size} height={size} viewBox="0 0 20 20" fill="none" {...props}>
+        <title>{title}</title>
+        <circle cx={10} cy={10} r={8} fill="currentColor" />
+        <path
+          d="M11 14.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1zM11 10.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v5z"
+          fill="#fff"
+        />
+      </svg>
+    );
+  }
+}

packages/big-design/src/components/Icons/Icon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { defaultTheme, ThemeInterface } from '../../theme';
+import { Spacing } from '../../theme/system/spacing';
+
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size: keyof Spacing;
+  theme?: ThemeInterface;
+  title?: string;
+}
+
+export class Icon extends React.PureComponent<IconProps> {
+  static defaultProps: Partial<IconProps> = {
+    size: 'large',
+  };
+
+  protected getSize() {
+    const theme = this.props.theme || defaultTheme;
+    const { spacing } = theme;
+
+    return spacing[this.props.size];
+  }
+}

packages/big-design/src/components/Icons/LoadingIcon.tsx

@@ -0,0 +1,25 @@
+// **********************************
+// Auto-generated file, do NOT modify
+// **********************************
+import React from 'react';
+
+import { Icon } from './Icon';
+
+export default class SvgLoadingIcon extends Icon {
+  render() {
+    const { title, theme, ...rest } = this.props;
+    const size = this.getSize();
+    const style = {
+      width: size,
+      height: size,
+    };
+    const props = { ...rest, style };
+
+    return (
+      <svg width={size} height={size} viewBox="0 0 20 20" fill="none" {...props}>
+        <title>{title}</title>
+        <path d="M18 10a8 8 0 1 0-8 8v-2.29A5.709 5.709 0 1 1 15.71 10H18z" fill="currentColor" />
+      </svg>
+    );
+  }
+}

packages/big-design/src/components/Icons/PlusIcon.tsx

@@ -0,0 +1,28 @@
+// **********************************
+// Auto-generated file, do NOT modify
+// **********************************
+import React from 'react';
+
+import { Icon } from './Icon';
+
+export default class SvgPlusIcon extends Icon {
+  render() {
+    const { title, theme, ...rest } = this.props;
+    const size = this.getSize();
+    const style = {
+      width: size,
+      height: size,
+    };
+    const props = { ...rest, style };
+
+    return (
+      <svg width={size} height={size} viewBox="0 0 20 20" fill="none" {...props}>
+        <title>{title}</title>
+        <path
+          d="M16 11h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H4c-.55 0-1-.45-1-1s.45-1 1-1h5V4c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+}

packages/big-design/src/components/Icons/index.ts

@@ -0,0 +1,7 @@
+export * from './Icon';
+
+export { default as CheckIcon } from './CheckIcon';
+export { default as DropdownIcon } from './DropdownIcon';
+export { default as ErrorIcon } from './ErrorIcon';
+export { default as LoadingIcon } from './LoadingIcon';
+export { default as PlusIcon } from './PlusIcon';

packages/big-design/src/components/index.ts

@@ -2,4 +2,5 @@ export * from './Box';
 export * from './Flex';
 export * from './GlobalStyle';
 export * from './Grid';
+export * from './Icons';
 export * from './Typography';