@ssa-ui-kit/core 0.0.10-alpha → 0.0.11-alpha

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

@@ -1,17 +1,17 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const Trainings = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
-  <svg
-    width={`${size}px`}
-    height={`${size}px`}
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    {...props}>
-    <title>Trainings</title>
-    <path
-      d="M6.75 3.75C5.51634 3.75 4.5 4.76634 4.5 6V6.89062C4.26408 6.80564 4.01367 6.75 3.75 6.75C2.51634 6.75 1.5 7.76634 1.5 9V11.25H0V12.75H1.5V15C1.5 16.2329 2.51544 17.25 3.75 17.25C4.01342 17.25 4.26327 17.1968 4.5 17.1123V18C4.5 19.2329 5.51544 20.25 6.75 20.25C7.3669 20.25 7.93454 19.9971 8.34082 19.5908C8.7471 19.1845 9 18.6169 9 18V12.75H15V18C15 18.6169 15.2529 19.1845 15.6592 19.5908C16.0655 19.9971 16.6331 20.25 17.25 20.25C18.4846 20.25 19.5 19.2329 19.5 18V17.1123C19.7367 17.1968 19.9866 17.25 20.25 17.25C21.4846 17.25 22.5 16.2329 22.5 15V12.75H24V11.25H22.5V9C22.5 7.76634 21.4837 6.75 20.25 6.75C19.9863 6.75 19.7359 6.80564 19.5 6.89062V6C19.5 4.76634 18.4837 3.75 17.25 3.75C16.0154 3.75 15 4.76711 15 6V11.25H9V6C9 4.76711 7.98456 3.75 6.75 3.75ZM6.75 5.25C7.17444 5.25 7.5 5.57689 7.5 6V18C7.5 18.2111 7.41699 18.3936 7.28027 18.5303C7.14355 18.667 6.9611 18.75 6.75 18.75C6.32556 18.75 6 18.4231 6 18V6C6 5.57466 6.32466 5.25 6.75 5.25ZM17.25 5.25C17.6753 5.25 18 5.57466 18 6V9V11.4785V15V18C18 18.4231 17.6744 18.75 17.25 18.75C17.0389 18.75 16.8564 18.667 16.7197 18.5303C16.583 18.3936 16.5 18.2111 16.5 18V6C16.5 5.57689 16.8256 5.25 17.25 5.25ZM3.75 8.25C4.17444 8.25 4.5 8.57689 4.5 9V11.4785V15C4.5 15.2111 4.41699 15.3936 4.28027 15.5303C4.14355 15.667 3.9611 15.75 3.75 15.75C3.32556 15.75 3 15.4231 3 15V9C3 8.57466 3.32466 8.25 3.75 8.25ZM20.25 8.25C20.6753 8.25 21 8.57466 21 9V15C21 15.4231 20.6744 15.75 20.25 15.75C20.0389 15.75 19.8564 15.667 19.7197 15.5303C19.583 15.3936 19.5 15.2111 19.5 15V9C19.5 8.57689 19.8256 8.25 20.25 8.25Z"
-      fill={fill}
-    />
-  </svg>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const Trainings = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
+    <title>Trainings</title>
+    <path
+      d="M6.75 3.75C5.51634 3.75 4.5 4.76634 4.5 6V6.89062C4.26408 6.80564 4.01367 6.75 3.75 6.75C2.51634 6.75 1.5 7.76634 1.5 9V11.25H0V12.75H1.5V15C1.5 16.2329 2.51544 17.25 3.75 17.25C4.01342 17.25 4.26327 17.1968 4.5 17.1123V18C4.5 19.2329 5.51544 20.25 6.75 20.25C7.3669 20.25 7.93454 19.9971 8.34082 19.5908C8.7471 19.1845 9 18.6169 9 18V12.75H15V18C15 18.6169 15.2529 19.1845 15.6592 19.5908C16.0655 19.9971 16.6331 20.25 17.25 20.25C18.4846 20.25 19.5 19.2329 19.5 18V17.1123C19.7367 17.1968 19.9866 17.25 20.25 17.25C21.4846 17.25 22.5 16.2329 22.5 15V12.75H24V11.25H22.5V9C22.5 7.76634 21.4837 6.75 20.25 6.75C19.9863 6.75 19.7359 6.80564 19.5 6.89062V6C19.5 4.76634 18.4837 3.75 17.25 3.75C16.0154 3.75 15 4.76711 15 6V11.25H9V6C9 4.76711 7.98456 3.75 6.75 3.75ZM6.75 5.25C7.17444 5.25 7.5 5.57689 7.5 6V18C7.5 18.2111 7.41699 18.3936 7.28027 18.5303C7.14355 18.667 6.9611 18.75 6.75 18.75C6.32556 18.75 6 18.4231 6 18V6C6 5.57466 6.32466 5.25 6.75 5.25ZM17.25 5.25C17.6753 5.25 18 5.57466 18 6V9V11.4785V15V18C18 18.4231 17.6744 18.75 17.25 18.75C17.0389 18.75 16.8564 18.667 16.7197 18.5303C16.583 18.3936 16.5 18.2111 16.5 18V6C16.5 5.57689 16.8256 5.25 17.25 5.25ZM3.75 8.25C4.17444 8.25 4.5 8.57689 4.5 9V11.4785V15C4.5 15.2111 4.41699 15.3936 4.28027 15.5303C4.14355 15.667 3.9611 15.75 3.75 15.75C3.32556 15.75 3 15.4231 3 15V9C3 8.57466 3.32466 8.25 3.75 8.25ZM20.25 8.25C20.6753 8.25 21 8.57466 21 9V15C21 15.4231 20.6744 15.75 20.25 15.75C20.0389 15.75 19.8564 15.667 19.7197 15.5303C19.583 15.3936 19.5 15.2111 19.5 15V9C19.5 8.57689 19.8256 8.25 20.25 8.25Z"
+      fill={fill}
+    />
+  </svg>
+);

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

@@ -1,20 +1,20 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const Union = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
-  <svg
-    width={`${size}px`}
-    height={`${size}px`}
-    fill="none"
-    viewBox="0 0 3 10"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    {...props}>
-    <title>Union</title>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M1.50879 2C0.956504 2 0.508789 1.55228 0.508789 1C0.508789 0.447715 0.956504 0 1.50879 0H1.51777C2.07006 0 2.51777 0.447715 2.51777 1C2.51777 1.55228 2.07006 2 1.51777 2H1.50879ZM2.21416 9C2.21416 9.3866 1.90076 9.7 1.51416 9.7C1.12756 9.7 0.81416 9.3866 0.81416 9V4C0.81416 3.6134 1.12756 3.3 1.51416 3.3C1.90076 3.3 2.21416 3.6134 2.21416 4V9Z"
-      fill={fill}
-    />
-  </svg>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const Union = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    fill="none"
+    viewBox="0 0 3 10"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
+    <title>Union</title>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.50879 2C0.956504 2 0.508789 1.55228 0.508789 1C0.508789 0.447715 0.956504 0 1.50879 0H1.51777C2.07006 0 2.51777 0.447715 2.51777 1C2.51777 1.55228 2.07006 2 1.51777 2H1.50879ZM2.21416 9C2.21416 9.3866 1.90076 9.7 1.51416 9.7C1.12756 9.7 0.81416 9.3866 0.81416 9V4C0.81416 3.6134 1.12756 3.3 1.51416 3.3C1.90076 3.3 2.21416 3.6134 2.21416 4V9Z"
+      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,55 +1,55 @@
-// 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',
-] 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',
+] as const;

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

@@ -1,115 +1,115 @@
-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 { Bin } from './Bin';
-import { Change } from './Change';
-import { Copy } from './Copy';
-import { Robot } from './Robot';
-import { Chart } from './Chart';
-import { Clock } from './Clock';
-
-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,
-];
-
-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 { Bin } from './Bin';
+import { Change } from './Change';
+import { Copy } from './Copy';
+import { Robot } from './Robot';
+import { Chart } from './Chart';
+import { Clock } from './Clock';
+
+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,
+];
+
+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;
+};