@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/src/icons/outline/currency-euro/currency-euro.icon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const CurrencyEuroIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 22 23" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M13.2981 15.4775C12.0289 17.6742 9.97111 17.6742 8.7019 15.4775C7.4327 13.2808 7.4327 9.71922 8.7019 7.52252C9.97111 5.32583 12.0289 5.32583 13.2981 7.52252M6.66667 9.8125H11M6.66667 13.1875H11M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/document-text/document-text.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const DocumentTextIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/outline/document-text/document-text.icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
+
+export const DocumentTextIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 18 22" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M5.74996 11H12.25M5.74996 15.3333H12.25M14.4166 20.75H3.58329C2.38668 20.75 1.41663 19.78 1.41663 18.5833V3.41667C1.41663 2.22005 2.38668 1.25 3.58329 1.25H9.63456C9.92188 1.25 10.1974 1.36414 10.4006 1.5673L16.266 7.4327C16.4692 7.63586 16.5833 7.91141 16.5833 8.19873V18.5833C16.5833 19.7799 15.6132 20.75 14.4166 20.75Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/exclamation/exclamation.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const ExclamationIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/outline/exclamation/exclamation.icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
+
+export const ExclamationIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 23 21" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M11.5 8.125V10.375M11.5 14.875H11.5113M3.70581 19.375H19.2943C21.0263 19.375 22.1088 17.5 21.2428 16L13.4486 2.5C12.5826 1 10.4175 1 9.55148 2.5L1.75725 16C0.891228 17.5 1.97376 19.375 3.70581 19.375Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/exclamation-circle/exclamation-circle.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const ExclamationCircleIcon: ({ color, size, }: IconSVGProps) => React.JSX.Element;

package/src/icons/outline/exclamation-circle/exclamation-circle.icon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
+
+export const ExclamationCircleIcon = ({
+  color,
+  size = Scale.l,
+}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 22 23" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/eye/eye.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const EyeIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/outline/eye/eye.icon.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
+
+export const EyeIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 25 19" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.875 9.5C15.875 11.364 14.3639 12.875 12.5 12.875C10.636 12.875 9.12497 11.364 9.12497 9.5C9.12497 7.63604 10.636 6.125 12.5 6.125C14.3639 6.125 15.875 7.63604 15.875 9.5Z"
+      />
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M1.7655 9.49996C3.19906 4.93574 7.46313 1.625 12.5005 1.625C17.5378 1.625 21.8019 4.93578 23.2354 9.50004C21.8019 14.0643 17.5378 17.375 12.5005 17.375C7.46313 17.375 3.19904 14.0642 1.7655 9.49996Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/eye-off/eye-off.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const EyeOffIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/outline/eye-off/eye-off.icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
+
+export const EyeOffIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 25 23" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.37503 1.375L6.41283 5.4128M22.625 21.625L18.5876 17.5876M14.6093 19.1777C13.9262 19.3072 13.2213 19.375 12.5005 19.375C7.46319 19.375 3.1991 16.0642 1.76556 11.5C2.15582 10.2574 2.75585 9.10781 3.52414 8.09258M10.1135 9.11351C10.7243 8.50276 11.568 8.125 12.5 8.125C14.364 8.125 15.875 9.63604 15.875 11.5C15.875 12.432 15.4973 13.2757 14.8865 13.8865M10.1135 9.11351L14.8865 13.8865M10.1135 9.11351L6.41283 5.4128M14.8865 13.8865L6.41283 5.4128M14.8865 13.8865L18.5876 17.5876M6.41283 5.4128C8.16763 4.28148 10.2574 3.625 12.5005 3.625C17.5379 3.625 21.802 6.93578 23.2355 11.5C22.4402 14.0321 20.7739 16.1783 18.5876 17.5876"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/filter/filter.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const FilterIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/outline/filter/filter.icon.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
+
+export const FilterIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 22 22" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M1.25 2.25C1.25 1.69772 1.69772 1.25 2.25 1.25H19.75C20.3023 1.25 20.75 1.69772 20.75 2.25V5.16912C20.75 5.43434 20.6446 5.68869 20.4571 5.87623L13.4596 12.8738C13.272 13.0613 13.1667 13.3157 13.1667 13.5809V16.4167L8.83333 20.75V13.5809C8.83333 13.3157 8.72798 13.0613 8.54044 12.8738L1.54289 5.87623C1.35536 5.68869 1.25 5.43434 1.25 5.16912V2.25Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/information-circle/information-circle.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const InformationCircleIcon: ({ color, size, }: IconSVGProps) => React.JSX.Element;

package/src/icons/outline/information-circle/information-circle.icon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
+
+export const InformationCircleIcon = ({
+  color,
+  size = Scale.l,
+}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 22 22" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12.0833 15.3333H11V11H9.91667M11 6.66667H11.0108M20.75 11C20.75 16.3848 16.3848 20.75 11 20.75C5.61522 20.75 1.25 16.3848 1.25 11C1.25 5.61522 5.61522 1.25 11 1.25C16.3848 1.25 20.75 5.61522 20.75 11Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/logout/logout.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const LogoutIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/outline/logout/logout.icon.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
+
+export const LogoutIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 22 21"
+      fill="none"
+      style={{transform: [{scaleX: -1}]}}
+    >
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9.91667 15L5.58333 10.5M5.58333 10.5L9.91667 6M5.58333 10.5L20.75 10.5M15.3333 15V16.125C15.3333 17.989 13.8783 19.5 12.0833 19.5H4.5C2.70507 19.5 1.25 17.989 1.25 16.125V4.875C1.25 3.01104 2.70507 1.5 4.5 1.5H12.0833C13.8783 1.5 15.3333 3.01104 15.3333 4.875V6"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/mail/mail.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const MailIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/outline/mail/mail.icon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const MailIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 23 19" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M1.375 5L10.2519 10.9179C11.0077 11.4218 11.9923 11.4218 12.7481 10.9179L21.625 5M3.625 17.375H19.375C20.6176 17.375 21.625 16.3676 21.625 15.125V3.875C21.625 2.63236 20.6176 1.625 19.375 1.625H3.625C2.38236 1.625 1.375 2.63236 1.375 3.875V15.125C1.375 16.3676 2.38236 17.375 3.625 17.375Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/mail-open/mail-open.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const MailOpenIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/outline/mail-open/mail-open.icon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const MailOpenIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 23 22" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M1.375 18.5833V8.90954C1.375 8.18511 1.75098 7.50861 2.37692 7.10676L10.2519 2.05121C11.0077 1.56602 11.9923 1.56602 12.7481 2.05121L20.6231 7.10676C21.249 7.50861 21.625 8.18511 21.625 8.90954V18.5833M1.375 18.5833C1.375 19.7799 2.38236 20.75 3.625 20.75H19.375C20.6176 20.75 21.625 19.7799 21.625 18.5833M1.375 18.5833L8.96875 13.7083M21.625 18.5833L14.0312 13.7083M1.375 8.83331L8.96875 13.7083M21.625 8.83331L14.0312 13.7083M14.0312 13.7083L12.7481 14.5321C11.9923 15.0173 11.0077 15.0173 10.2519 14.5321L8.96875 13.7083"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/menu/menu.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const MenuIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/outline/menu/menu.icon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const MenuIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 21 17" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M1.5 1.75H19.5M1.5 8.5H19.5M1.5 15.25H19.5"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/minus-sm/minus-sm.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const MinusSmallIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/outline/minus-sm/minus-sm.icon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const MinusSmallIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 3" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M14.5 1.5H1.5"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/office-building/office-building.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const OfficeBuildingIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/outline/office-building/office-building.icon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const OfficeBuildingIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 23 23" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M19.375 21.625V3.625C19.375 2.38236 18.3676 1.375 17.125 1.375H5.875C4.63236 1.375 3.625 2.38236 3.625 3.625V21.625M19.375 21.625L21.625 21.625M19.375 21.625H13.75M3.625 21.625L1.375 21.625M3.625 21.625H9.25M8.125 5.87497H9.25M8.125 10.375H9.25M13.75 5.87497H14.875M13.75 10.375H14.875M9.25 21.625V16C9.25 15.3787 9.75368 14.875 10.375 14.875H12.625C13.2463 14.875 13.75 15.3787 13.75 16V21.625M9.25 21.625H13.75"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/outline-default.preview.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const IconOutlineDefaultPreview: ({}: {}) => React.JSX.Element;

package/src/icons/outline/outline-default.preview.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import {View} from 'react-native';
+import {Icon} from '..';
+import {Size} from '../../types/size.enum';
+import {Scale} from '../../theme/scale';
+
+export const IconOutlineDefaultPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        padding: 20,
+        flexDirection: 'row',
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          alignContent: 'center',
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon style={'regular'} name={'calendar'} />
+          <Icon style={'regular'} name={'chat'} />
+          <Icon style={'regular'} name={'chat-alt'} />
+          <Icon style={'regular'} name={'check-circle'} />
+          <Icon style={'regular'} name={'chevron-left'} />
+          <Icon style={'regular'} name={'chevron-right'} />
+          <Icon style={'regular'} name={'clock'} />
+          <Icon style={'regular'} name={'cloud-download'} />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon style={'regular'} name={'currency-euro'} />
+          <Icon style={'regular'} name={'document-text'} />
+          <Icon style={'regular'} name={'exclamation'} />
+          <Icon style={'regular'} name={'exclamation-circle'} />
+          <Icon style={'regular'} name={'eye'} />
+          <Icon style={'regular'} name={'eye-off'} />
+          <Icon style={'regular'} name={'filter'} />
+          <Icon style={'regular'} name={'information-circle'} />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon style={'regular'} name={'logout'} />
+          <Icon style={'regular'} name={'mail'} />
+          <Icon style={'regular'} name={'mail-open'} />
+          <Icon style={'regular'} name={'menu'} />
+          <Icon style={'regular'} name={'minus-sm'} />
+          <Icon style={'regular'} name={'office-building'} />
+          <Icon style={'regular'} name={'paper-airplane'} />
+          <Icon style={'regular'} name={'paper-clip'} />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon style={'regular'} name={'pencil'} />
+          <Icon style={'regular'} name={'phone'} />
+          <Icon style={'regular'} name={'plus'} />
+          <Icon style={'regular'} name={'plus-sm'} />
+          <Icon style={'regular'} name={'qrcode'} />
+          <Icon style={'regular'} name={'refresh'} />
+          <Icon style={'regular'} name={'search'} />
+          <Icon style={'regular'} name={'selector'} />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon style={'regular'} name={'sm-view-grid-add'} />
+          <Icon style={'regular'} name={'status-online'} />
+          <Icon style={'regular'} name={'thumb-up'} />
+          <Icon style={'regular'} name={'trash'} />
+          <Icon style={'regular'} name={'user'} />
+          <Icon style={'regular'} name={'users'} />
+          <Icon style={'regular'} name={'user-group'} />
+          <Icon style={'regular'} name={'xmark'} />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon style={'regular'} name={'share'} />
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/icons/outline/outline-grey.preview.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const IconOutlineGreyPreview: ({}: {}) => React.JSX.Element;