@ssa-ui-kit/core 0.0.20-alpha → 0.0.21-alpha

package/src/components/Icon/icons/Unlock.tsx

@@ -1,23 +1,23 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const Unlock = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={`${size}px`}
-    height={`${size}px`}
-    viewBox="0 0 15 15"
-    fill="none"
-    {...props}>
-    <title>Unlock</title>
-    <path
-      d="M6.65912 9.39867C6.65912 8.92244 7.02368 8.55788 7.49991 8.55788C7.97614 8.55788 8.3407 8.92244 8.3407 9.39867C8.3407 9.65047 8.22903 9.87161 8.06044 10.0117V10.8C8.06044 11.1087 7.80864 11.3605 7.49991 11.3605C7.19118 11.3605 6.93939 11.1087 6.93939 10.8V10.0117C6.77079 9.87161 6.65912 9.65047 6.65912 9.39867Z"
-      fill={fill}
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M5.83532 0.155603C6.18303 0.0480855 6.53419 -0.00110042 6.87832 1.86603e-05C6.9938 2.86739e-05 7.10506 0.00696763 7.2172 0.0182945C8.58196 0.158886 9.80554 1.10042 10.2356 2.48784L10.2423 2.50954V2.51968C10.2737 2.62671 10.3587 2.90395 10.4389 3.1641C10.4816 3.3028 10.5228 3.43589 10.5532 3.53432L10.6022 3.69236C10.6572 3.84181 10.6239 4.00725 10.5205 4.1254L10.5198 4.12618C10.4137 4.24582 10.2505 4.29597 10.0952 4.25777C9.94024 4.22049 9.821 4.09922 9.78152 3.94804L9.73402 3.79382C9.70448 3.69783 9.66443 3.56751 9.62239 3.43024C9.53858 3.15656 9.44609 2.8527 9.41386 2.73987L9.40808 2.71967V2.71315C8.96217 1.32972 7.47234 0.553255 6.08177 0.985168C4.68006 1.42061 3.88983 2.91025 4.3238 4.30953L4.38411 4.50397H4.38227C4.49217 4.83056 4.65126 5.33061 4.73747 5.60528H11.9841C12.5279 5.60528 12.9749 6.05233 12.9749 6.59607V13.3224C12.9749 13.8661 12.5279 14.3132 11.9841 14.3132H3.01569C2.47195 14.3132 2.0249 13.8661 2.0249 13.3224V6.59607C2.0249 6.05233 2.47195 5.60528 3.01569 5.60528H3.82849C3.71189 5.22705 3.56504 4.75383 3.50527 4.58903L3.49628 4.56425V4.54284C2.93702 2.69678 3.99409 0.727215 5.83532 0.155603ZM3.01569 6.46581C2.94308 6.46581 2.88543 6.52346 2.88543 6.59607V13.3224C2.88543 13.395 2.94308 13.4527 3.01569 13.4527H11.9841C12.0567 13.4527 12.1144 13.395 12.1144 13.3224V6.59607C12.1144 6.52346 12.0567 6.46581 11.9841 6.46581H3.01569Z"
-      fill={fill}
-    />
-  </svg>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const Unlock = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 15 15"
+    fill="none"
+    {...props}>
+    <title>Unlock</title>
+    <path
+      d="M6.65912 9.39867C6.65912 8.92244 7.02368 8.55788 7.49991 8.55788C7.97614 8.55788 8.3407 8.92244 8.3407 9.39867C8.3407 9.65047 8.22903 9.87161 8.06044 10.0117V10.8C8.06044 11.1087 7.80864 11.3605 7.49991 11.3605C7.19118 11.3605 6.93939 11.1087 6.93939 10.8V10.0117C6.77079 9.87161 6.65912 9.65047 6.65912 9.39867Z"
+      fill={fill}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.83532 0.155603C6.18303 0.0480855 6.53419 -0.00110042 6.87832 1.86603e-05C6.9938 2.86739e-05 7.10506 0.00696763 7.2172 0.0182945C8.58196 0.158886 9.80554 1.10042 10.2356 2.48784L10.2423 2.50954V2.51968C10.2737 2.62671 10.3587 2.90395 10.4389 3.1641C10.4816 3.3028 10.5228 3.43589 10.5532 3.53432L10.6022 3.69236C10.6572 3.84181 10.6239 4.00725 10.5205 4.1254L10.5198 4.12618C10.4137 4.24582 10.2505 4.29597 10.0952 4.25777C9.94024 4.22049 9.821 4.09922 9.78152 3.94804L9.73402 3.79382C9.70448 3.69783 9.66443 3.56751 9.62239 3.43024C9.53858 3.15656 9.44609 2.8527 9.41386 2.73987L9.40808 2.71967V2.71315C8.96217 1.32972 7.47234 0.553255 6.08177 0.985168C4.68006 1.42061 3.88983 2.91025 4.3238 4.30953L4.38411 4.50397H4.38227C4.49217 4.83056 4.65126 5.33061 4.73747 5.60528H11.9841C12.5279 5.60528 12.9749 6.05233 12.9749 6.59607V13.3224C12.9749 13.8661 12.5279 14.3132 11.9841 14.3132H3.01569C2.47195 14.3132 2.0249 13.8661 2.0249 13.3224V6.59607C2.0249 6.05233 2.47195 5.60528 3.01569 5.60528H3.82849C3.71189 5.22705 3.56504 4.75383 3.50527 4.58903L3.49628 4.56425V4.54284C2.93702 2.69678 3.99409 0.727215 5.83532 0.155603ZM3.01569 6.46581C2.94308 6.46581 2.88543 6.52346 2.88543 6.59607V13.3224C2.88543 13.395 2.94308 13.4527 3.01569 13.4527H11.9841C12.0567 13.4527 12.1144 13.395 12.1144 13.3224V6.59607C12.1144 6.52346 12.0567 6.46581 11.9841 6.46581H3.01569Z"
+      fill={fill}
+    />
+  </svg>
+);

package/src/components/Icon/icons/User.tsx

@@ -1,35 +1,35 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const User = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
-  <svg
-    width={`${size}px`}
-    height={`${size}px`}
-    fill="none"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    {...props}>
-    <title>User</title>
-    <path
-      d="M12.1202 12.78C12.0502 12.77 11.9602 12.77 11.8802 12.78C10.1202 12.72 8.72021 11.28 8.72021 9.50998C8.72021 7.69998 10.1802 6.22998 12.0002 6.22998C13.8102 6.22998 15.2802 7.69998 15.2802 9.50998C15.2702 11.28 13.8802 12.72 12.1202 12.78Z"
-      stroke={fill}
-      strokeWidth="1.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M18.7398 19.3801C16.9598 21.0101 14.5998 22.0001 11.9998 22.0001C9.39977 22.0001 7.03977 21.0101 5.25977 19.3801C5.35977 18.4401 5.95977 17.5201 7.02977 16.8001C9.76977 14.9801 14.2498 14.9801 16.9698 16.8001C18.0398 17.5201 18.6398 18.4401 18.7398 19.3801Z"
-      stroke={fill}
-      strokeWidth="1.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-      stroke={fill}
-      strokeWidth="1.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const User = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
+    <title>User</title>
+    <path
+      d="M12.1202 12.78C12.0502 12.77 11.9602 12.77 11.8802 12.78C10.1202 12.72 8.72021 11.28 8.72021 9.50998C8.72021 7.69998 10.1802 6.22998 12.0002 6.22998C13.8102 6.22998 15.2802 7.69998 15.2802 9.50998C15.2702 11.28 13.8802 12.72 12.1202 12.78Z"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M18.7398 19.3801C16.9598 21.0101 14.5998 22.0001 11.9998 22.0001C9.39977 22.0001 7.03977 21.0101 5.25977 19.3801C5.35977 18.4401 5.95977 17.5201 7.02977 16.8001C9.76977 14.9801 14.2498 14.9801 16.9698 16.8001C18.0398 17.5201 18.6398 18.4401 18.7398 19.3801Z"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/Icon/icons/Visible.tsx

@@ -1,28 +1,28 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const Visible = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
-  <svg
-    width={`${size}px`}
-    height={`${size}px`}
-    fill="none"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    {...props}>
-    <title>Visible</title>
-    <path
-      d="M15.5799 11.9999C15.5799 13.9799 13.9799 15.5799 11.9999 15.5799C10.0199 15.5799 8.41992 13.9799 8.41992 11.9999C8.41992 10.0199 10.0199 8.41992 11.9999 8.41992C13.9799 8.41992 15.5799 10.0199 15.5799 11.9999Z"
-      stroke={fill}
-      strokeWidth="1.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M11.9998 20.27C15.5298 20.27 18.8198 18.19 21.1098 14.59C22.0098 13.18 22.0098 10.81 21.1098 9.39997C18.8198 5.79997 15.5298 3.71997 11.9998 3.71997C8.46984 3.71997 5.17984 5.79997 2.88984 9.39997C1.98984 10.81 1.98984 13.18 2.88984 14.59C5.17984 18.19 8.46984 20.27 11.9998 20.27Z"
-      stroke={fill}
-      strokeWidth="1.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const Visible = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
+    <title>Visible</title>
+    <path
+      d="M15.5799 11.9999C15.5799 13.9799 13.9799 15.5799 11.9999 15.5799C10.0199 15.5799 8.41992 13.9799 8.41992 11.9999C8.41992 10.0199 10.0199 8.41992 11.9999 8.41992C13.9799 8.41992 15.5799 10.0199 15.5799 11.9999Z"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.9998 20.27C15.5298 20.27 18.8198 18.19 21.1098 14.59C22.0098 13.18 22.0098 10.81 21.1098 9.39997C18.8198 5.79997 15.5298 3.71997 11.9998 3.71997C8.46984 3.71997 5.17984 5.79997 2.88984 9.39997C1.98984 10.81 1.98984 13.18 2.88984 14.59C5.17984 18.19 8.46984 20.27 11.9998 20.27Z"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/Icon/icons/Warning.tsx

@@ -1,23 +1,23 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const Warning = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
-  <svg
-    width={`${size}px`}
-    height={`${size}px`}
-    fill="none"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    {...props}>
-    <title>Warning</title>
-    <path
-      d="M9.65357 1.32393C9.80753 1.05726 10.1924 1.05726 10.3464 1.32393L18.5118 15.4668C18.6657 15.7334 18.4733 16.0668 18.1654 16.0668H1.8346C1.52668 16.0668 1.33423 15.7334 1.48819 15.4668L9.65357 1.32393Z"
-      stroke={fill}
-      strokeWidth="1.2"
-    />
-    <path
-      d="M10.7003 6.19072C10.7003 5.80412 10.3869 5.49072 10.0003 5.49072C9.61368 5.49072 9.30028 5.80412 9.30028 6.19072V10.159C9.30028 10.5456 9.61368 10.859 10.0003 10.859C10.3869 10.859 10.7003 10.5456 10.7003 10.159V6.19072ZM9.99609 12.1749C9.44381 12.1749 8.99609 12.6226 8.99609 13.1749C8.99609 13.7272 9.44381 14.1749 9.99609 14.1749H10.0032C10.5555 14.1749 11.0032 13.7272 11.0032 13.1749C11.0032 12.6226 10.5555 12.1749 10.0032 12.1749H9.99609Z"
-      fill={fill}
-    />
-  </svg>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const Warning = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    fill="none"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
+    <title>Warning</title>
+    <path
+      d="M9.65357 1.32393C9.80753 1.05726 10.1924 1.05726 10.3464 1.32393L18.5118 15.4668C18.6657 15.7334 18.4733 16.0668 18.1654 16.0668H1.8346C1.52668 16.0668 1.33423 15.7334 1.48819 15.4668L9.65357 1.32393Z"
+      stroke={fill}
+      strokeWidth="1.2"
+    />
+    <path
+      d="M10.7003 6.19072C10.7003 5.80412 10.3869 5.49072 10.0003 5.49072C9.61368 5.49072 9.30028 5.80412 9.30028 6.19072V10.159C9.30028 10.5456 9.61368 10.859 10.0003 10.859C10.3869 10.859 10.7003 10.5456 10.7003 10.159V6.19072ZM9.99609 12.1749C9.44381 12.1749 8.99609 12.6226 8.99609 13.1749C8.99609 13.7272 9.44381 14.1749 9.99609 14.1749H10.0032C10.5555 14.1749 11.0032 13.7272 11.0032 13.1749C11.0032 12.6226 10.5555 12.1749 10.0032 12.1749H9.99609Z"
+      fill={fill}
+    />
+  </svg>
+);

package/src/components/Icon/icons/iconsList.tsx

@@ -1,61 +1,61 @@
-// This file is also imported into the Button/Button.stories.tsx
-// and into the ./index.tsx
-// We need such a file to let webpack create a chunk for
-// the <Icon /> component which uses React.lazy().
-// If we import <Icon /> directly into the Button/Button.stories.tsx,
-// webpack will consider that as an objection to the chunk creation.
-//
-// Make sure the order in this array corresponds to the one in the
-// ./index.tsx
-export const iconsList = [
-  'diet',
-  'calendar',
-  'home',
-  'stats',
-  'sleep',
-  'trainings',
-  'measurements',
-  'settings',
-  'plus',
-  'minus',
-  'more',
-  'more-vertical',
-  'check',
-  'check-circle',
-  'cross',
-  'user',
-  'union',
-  'notification',
-  'information',
-  'warning',
-  'attention',
-  'visible',
-  'invisible',
-  'log-out',
-  'log-in',
-  'email',
-  'lock',
-  'carrot-down',
-  'carrot-up',
-  'carrot-left',
-  'carrot-right',
-  'radio-on',
-  'circle',
-  'arrow-up',
-  'arrow-down',
-  'filter',
-  'search',
-  'archive',
-  'bin',
-  'change',
-  'copy',
-  'robot',
-  'chart',
-  'clock',
-  'unarchive',
-  'cogwheel',
-  'circular',
-  'ban-user',
-  'confirm-email',
-  'unlock',
-] as const;
+// This file is also imported into the Button/Button.stories.tsx
+// and into the ./index.tsx
+// We need such a file to let webpack create a chunk for
+// the <Icon /> component which uses React.lazy().
+// If we import <Icon /> directly into the Button/Button.stories.tsx,
+// webpack will consider that as an objection to the chunk creation.
+//
+// Make sure the order in this array corresponds to the one in the
+// ./index.tsx
+export const iconsList = [
+  'diet',
+  'calendar',
+  'home',
+  'stats',
+  'sleep',
+  'trainings',
+  'measurements',
+  'settings',
+  'plus',
+  'minus',
+  'more',
+  'more-vertical',
+  'check',
+  'check-circle',
+  'cross',
+  'user',
+  'union',
+  'notification',
+  'information',
+  'warning',
+  'attention',
+  'visible',
+  'invisible',
+  'log-out',
+  'log-in',
+  'email',
+  'lock',
+  'carrot-down',
+  'carrot-up',
+  'carrot-left',
+  'carrot-right',
+  'radio-on',
+  'circle',
+  'arrow-up',
+  'arrow-down',
+  'filter',
+  'search',
+  'archive',
+  'bin',
+  'change',
+  'copy',
+  'robot',
+  'chart',
+  'clock',
+  'unarchive',
+  'cogwheel',
+  'circular',
+  'ban-user',
+  'confirm-email',
+  'unlock',
+] as const;

package/src/components/Icon/icons/index.tsx

@@ -1,127 +1,127 @@
-import { IconProps, IMapIcons } from '../types';
-
-import { Calendar } from './Calendar';
-import { Diet } from './Diet';
-import { Home } from './Home';
-import { Measurements } from './Measurements';
-import { Settings } from './Settings';
-import { Sleep } from './Sleep';
-import { Stats } from './Stats';
-import { Trainings } from './Trainings';
-
-import { Plus } from './Plus';
-import { Minus } from './Minus';
-import { Cross } from './Cross';
-import { Check } from './Check';
-import { CheckCircle } from './CheckCircle';
-import { More } from './More';
-import { MoreVertical } from './MoreVertical';
-import { Notification } from './Notification';
-import { User } from './User';
-import { Union } from './Union';
-import { Visible } from './Visible';
-import { Invisible } from './Invisible';
-import { LogIn } from './LogIn';
-import { LogOut } from './LogOut';
-import { Email } from './Email';
-import { Lock } from './Lock';
-import { Information } from './Information';
-import { Warning } from './Warning';
-import { Attention } from './Attention';
-
-import { CarrotDown } from './CarrotDown';
-import { CarrotUp } from './CarrotUp';
-import { CarrotLeft } from './CarrotLeft';
-import { CarrotRight } from './CarrotRight';
-
-import { RadioOn } from './RadioOn';
-import { Circle } from './Circle';
-
-import { ArrowUp } from './ArrowUp';
-import { ArrowDown } from './ArrowDown';
-
-import { iconsList } from './iconsList';
-import { Filter } from './Filter';
-import { Search } from './Search';
-import { Archive } from './Archive';
-import { UnArchive } from './UnArchive';
-import { Bin } from './Bin';
-import { Change } from './Change';
-import { Copy } from './Copy';
-import { Robot } from './Robot';
-import { Chart } from './Chart';
-import { Clock } from './Clock';
-import { Cogwheel } from './Cogwheel';
-import { Circular } from './Circular';
-import { BanUser } from './BanUser';
-import { ConfirmEmail } from './ConfirmEmail';
-import { Unlock } from './Unlock';
-
-const componentsList = [
-  Diet,
-  Calendar,
-  Home,
-  Stats,
-  Sleep,
-  Trainings,
-  Measurements,
-  Settings,
-  Plus,
-  Minus,
-  More,
-  MoreVertical,
-  Check,
-  CheckCircle,
-  Cross,
-  User,
-  Union,
-  Notification,
-  Information,
-  Warning,
-  Attention,
-  Visible,
-  Invisible,
-  LogOut,
-  LogIn,
-  Email,
-  Lock,
-  CarrotDown,
-  CarrotUp,
-  CarrotLeft,
-  CarrotRight,
-  RadioOn,
-  Circle,
-  ArrowUp,
-  ArrowDown,
-  Filter,
-  Search,
-  Archive,
-  Bin,
-  Change,
-  Copy,
-  Robot,
-  Chart,
-  Clock,
-  UnArchive,
-  Cogwheel,
-  Circular,
-  BanUser,
-  ConfirmEmail,
-  Unlock,
-];
-
-const iconsMap: IMapIcons = iconsList.reduce((res, name, index) => {
-  res[name] = componentsList[index];
-  return res;
-}, {} as IMapIcons);
-
-const IconMapComponent = ({ name, color, ...props }: IconProps) => {
-  const Component = iconsMap[name];
-
-  if (Component == null) {
-    return null;
-  }
-
-  return <Component fill={color} {...props} />;
-};
-export default IconMapComponent;
+import { IconProps, IMapIcons } from '../types';
+
+import { Calendar } from './Calendar';
+import { Diet } from './Diet';
+import { Home } from './Home';
+import { Measurements } from './Measurements';
+import { Settings } from './Settings';
+import { Sleep } from './Sleep';
+import { Stats } from './Stats';
+import { Trainings } from './Trainings';
+
+import { Plus } from './Plus';
+import { Minus } from './Minus';
+import { Cross } from './Cross';
+import { Check } from './Check';
+import { CheckCircle } from './CheckCircle';
+import { More } from './More';
+import { MoreVertical } from './MoreVertical';
+import { Notification } from './Notification';
+import { User } from './User';
+import { Union } from './Union';
+import { Visible } from './Visible';
+import { Invisible } from './Invisible';
+import { LogIn } from './LogIn';
+import { LogOut } from './LogOut';
+import { Email } from './Email';
+import { Lock } from './Lock';
+import { Information } from './Information';
+import { Warning } from './Warning';
+import { Attention } from './Attention';
+
+import { CarrotDown } from './CarrotDown';
+import { CarrotUp } from './CarrotUp';
+import { CarrotLeft } from './CarrotLeft';
+import { CarrotRight } from './CarrotRight';
+
+import { RadioOn } from './RadioOn';
+import { Circle } from './Circle';
+
+import { ArrowUp } from './ArrowUp';
+import { ArrowDown } from './ArrowDown';
+
+import { iconsList } from './iconsList';
+import { Filter } from './Filter';
+import { Search } from './Search';
+import { Archive } from './Archive';
+import { UnArchive } from './UnArchive';
+import { Bin } from './Bin';
+import { Change } from './Change';
+import { Copy } from './Copy';
+import { Robot } from './Robot';
+import { Chart } from './Chart';
+import { Clock } from './Clock';
+import { Cogwheel } from './Cogwheel';
+import { Circular } from './Circular';
+import { BanUser } from './BanUser';
+import { ConfirmEmail } from './ConfirmEmail';
+import { Unlock } from './Unlock';
+
+const componentsList = [
+  Diet,
+  Calendar,
+  Home,
+  Stats,
+  Sleep,
+  Trainings,
+  Measurements,
+  Settings,
+  Plus,
+  Minus,
+  More,
+  MoreVertical,
+  Check,
+  CheckCircle,
+  Cross,
+  User,
+  Union,
+  Notification,
+  Information,
+  Warning,
+  Attention,
+  Visible,
+  Invisible,
+  LogOut,
+  LogIn,
+  Email,
+  Lock,
+  CarrotDown,
+  CarrotUp,
+  CarrotLeft,
+  CarrotRight,
+  RadioOn,
+  Circle,
+  ArrowUp,
+  ArrowDown,
+  Filter,
+  Search,
+  Archive,
+  Bin,
+  Change,
+  Copy,
+  Robot,
+  Chart,
+  Clock,
+  UnArchive,
+  Cogwheel,
+  Circular,
+  BanUser,
+  ConfirmEmail,
+  Unlock,
+];
+
+const iconsMap: IMapIcons = iconsList.reduce((res, name, index) => {
+  res[name] = componentsList[index];
+  return res;
+}, {} as IMapIcons);
+
+const IconMapComponent = ({ name, color, ...props }: IconProps) => {
+  const Component = iconsMap[name];
+
+  if (Component == null) {
+    return null;
+  }
+
+  return <Component fill={color} {...props} />;
+};
+export default IconMapComponent;

package/src/components/Icon/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Icon';
-export { iconsList } from './icons/iconsList';
+export { default } from './Icon';
+export { iconsList } from './icons/iconsList';

package/src/components/Icon/types.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-import { iconsList } from './icons/iconsList';
-
-export interface SVGProps extends React.SVGProps<SVGSVGElement> {
-  size?: number;
-}
-
-export interface IconProps extends Omit<SVGProps, 'fill'> {
-  name: keyof IMapIcons;
-}
-
-export type IMapIcons = {
-  [key in (typeof iconsList)[number]]: React.ElementType;
-};
+import React from 'react';
+import { iconsList } from './icons/iconsList';
+
+export interface SVGProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+export interface IconProps extends Omit<SVGProps, 'fill'> {
+  name: keyof IMapIcons;
+}
+
+export type IMapIcons = {
+  [key in (typeof iconsList)[number]]: React.ElementType;
+};