@tactics/toddle-styleguide 1.0.0 → 1.0.2

package/src/icons/outline/chevron-right/chevron-right.icon.tsx

@@ -2,13 +2,14 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
 import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
 
-export const ChevronRightIcon = ({color}: IconType) => {
+export const ChevronRightIcon = ({color, size = Scale.l}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg width="28" height="28" viewBox="0 0 26 27" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 11 19" fill="none">
       <Path
         stroke={
           color ? HexColor.of(color).toString() : context.colors.main['0']
@@ -16,7 +17,7 @@ export const ChevronRightIcon = ({color}: IconType) => {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M9.75 5.625L17.3333 13.5L9.75 21.375"
+        d="M1.75 1.625L9.33333 9.5L1.75 17.375"
       />
     </Svg>
   );

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

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const ClockIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const ClockIcon: ({ color, size }: IconSVGProps) => JSX.Element;

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

@@ -2,13 +2,14 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
 import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
 
-export const ClockIcon = ({color}: IconType) => {
+export const ClockIcon = ({color, size = Scale.l}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg width="28" height="28" viewBox="0 0 27 26" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 23 22" fill="none">
       <Path
         stroke={
           color ? HexColor.of(color).toString() : context.colors.main['0']
@@ -16,7 +17,7 @@ export const ClockIcon = ({color}: IconType) => {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M13.5 8.66667V13L16.875 16.25M23.625 13C23.625 18.3848 19.0919 22.75 13.5 22.75C7.90812 22.75 3.375 18.3848 3.375 13C3.375 7.61522 7.90812 3.25 13.5 3.25C19.0919 3.25 23.625 7.61522 23.625 13Z"
+        d="M11.5 6.66667V11L14.875 14.25M21.625 11C21.625 16.3848 17.0919 20.75 11.5 20.75C5.90812 20.75 1.375 16.3848 1.375 11C1.375 5.61522 5.90812 1.25 11.5 1.25C17.0919 1.25 21.625 5.61522 21.625 11Z"
       />
     </Svg>
   );

package/src/icons/outline/cloud-download/cloud-download.icon.d.ts

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const CloudDownloadIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const CloudDownloadIcon: ({ color, size }: IconSVGProps) => JSX.Element;

package/src/icons/outline/cloud-download/cloud-download.icon.tsx

@@ -2,13 +2,14 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
 import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
 
-export const CloudDownloadIcon = ({color}: IconType) => {
+export const CloudDownloadIcon = ({color, size = Scale.l}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 23 25" fill="none">
       <Path
         stroke={
           color ? HexColor.of(color).toString() : context.colors.main['0']
@@ -16,7 +17,7 @@ export const CloudDownloadIcon = ({color}: IconType) => {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M7.875 18C5.38972 18 3.375 15.9853 3.375 13.5C3.375 11.3546 4.87639 9.5598 6.8858 9.10907C6.7969 8.71194 6.75 8.29895 6.75 7.875C6.75 4.7684 9.2684 2.25 12.375 2.25C15.0967 2.25 17.3669 4.18303 17.8877 6.7511C17.925 6.75037 17.9625 6.75 18 6.75C21.1066 6.75 23.625 9.2684 23.625 12.375C23.625 15.0963 21.6925 17.3663 19.125 17.8875M10.125 21.375L13.5 24.75M13.5 24.75L16.875 21.375M13.5 24.75V11.25"
+        d="M5.875 17C3.38972 17 1.375 14.9853 1.375 12.5C1.375 10.3546 2.87639 8.5598 4.8858 8.10907C4.7969 7.71194 4.75 7.29895 4.75 6.875C4.75 3.7684 7.2684 1.25 10.375 1.25C13.0967 1.25 15.3669 3.18303 15.8877 5.7511C15.925 5.75037 15.9625 5.75 16 5.75C19.1066 5.75 21.625 8.2684 21.625 11.375C21.625 14.0963 19.6925 16.3663 17.125 16.8875M8.125 20.375L11.5 23.75M11.5 23.75L14.875 20.375M11.5 23.75V10.25"
       />
     </Svg>
   );

package/src/icons/outline/currency-euro/currency-euro.icon.d.ts

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const CurrencyEuroIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const CurrencyEuroIcon: ({ color, size }: IconSVGProps) => JSX.Element;

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

@@ -2,13 +2,14 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
 import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
 
-export const CurrencyEuroIcon = ({color}: IconType) => {
+export const CurrencyEuroIcon = ({color, size = Scale.l}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg width="28" height="28" viewBox="0 0 26 27" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 22 23" fill="none">
       <Path
         stroke={
           color ? HexColor.of(color).toString() : context.colors.main['0']
@@ -16,7 +17,7 @@ export const CurrencyEuroIcon = ({color}: IconType) => {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M15.2981 17.4775C14.0289 19.6742 11.9711 19.6742 10.7019 17.4775C9.4327 15.2808 9.4327 11.7192 10.7019 9.52252C11.9711 7.32583 14.0289 7.32583 15.2981 9.52252M8.66667 11.8125H13M8.66667 15.1875H13M22.75 13.5C22.75 19.0919 18.3848 23.625 13 23.625C7.61522 23.625 3.25 19.0919 3.25 13.5C3.25 7.90812 7.61522 3.375 13 3.375C18.3848 3.375 22.75 7.90812 22.75 13.5Z"
+        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

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const DocumentTextIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const DocumentTextIcon: ({ color, size }: IconSVGProps) => JSX.Element;

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

@@ -2,18 +2,19 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
 
-export const DocumentTextIcon = ({color}: IconType) => {
+export const DocumentTextIcon = ({color, size = Scale.l}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg width="28" height="28" viewBox="0 0 32 32" fill="none">
+    <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="M12 16H20M12 21.3333H20M22.6667 28H9.33332C7.86056 28 6.66666 26.8061 6.66666 25.3333V6.66667C6.66666 5.19391 7.86056 4 9.33332 4H16.781C17.1347 4 17.4738 4.14048 17.7238 4.39052L24.9428 11.6095C25.1928 11.8595 25.3333 12.1987 25.3333 12.5523V25.3333C25.3333 26.8061 24.1394 28 22.6667 28Z"
+        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

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const ExclamationIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const ExclamationIcon: ({ color, size }: IconSVGProps) => JSX.Element;

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

@@ -2,18 +2,19 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
 
-export const ExclamationIcon = ({color}: IconType) => {
+export const ExclamationIcon = ({color, size = Scale.l}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+    <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="M13.4997 10.125V12.375M13.4997 16.875H13.511M5.70551 21.375H21.294C23.026 21.375 24.1085 19.5 23.2425 18L15.4483 4.5C14.5823 3 12.4172 3 11.5512 4.5L3.75695 18C2.89092 19.5 3.97345 21.375 5.70551 21.375Z"
+        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

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const ExclamationCircleIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const ExclamationCircleIcon: ({ color, size, }: IconSVGProps) => JSX.Element;

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

@@ -2,18 +2,22 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
 
-export const ExclamationCircleIcon = ({color}: IconType) => {
+export const ExclamationCircleIcon = ({
+  color,
+  size = Scale.l,
+}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg width="28" height="28" viewBox="0 0 26 27" fill="none">
+    <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="M13 9V13.5M13 18H13.0108M22.75 13.5C22.75 19.0919 18.3848 23.625 13 23.625C7.61522 23.625 3.25 19.0919 3.25 13.5C3.25 7.90812 7.61522 3.375 13 3.375C18.3848 3.375 22.75 7.90812 22.75 13.5Z"
+        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

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const EyeIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const EyeIcon: ({ color, size }: IconSVGProps) => JSX.Element;

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

@@ -2,25 +2,26 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
 
-export const EyeIcon = ({color}: IconType) => {
+export const EyeIcon = ({color, size = Scale.l}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+    <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="M16.875 13.5C16.875 15.364 15.3639 16.875 13.5 16.875C11.636 16.875 10.125 15.364 10.125 13.5C10.125 11.636 11.636 10.125 13.5 10.125C15.3639 10.125 16.875 11.636 16.875 13.5Z"
+        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="M2.7655 13.5C4.19906 8.93574 8.46313 5.625 13.5005 5.625C18.5378 5.625 22.8019 8.93578 24.2354 13.5C22.8019 18.0643 18.5378 21.375 13.5005 21.375C8.46313 21.375 4.19904 18.0642 2.7655 13.5Z"
+        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

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const EyeOffIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const EyeOffIcon: ({ color, size }: IconSVGProps) => JSX.Element;

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

@@ -2,12 +2,13 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
 
-export const EyeOffIcon = ({color}: IconType) => {
+export const EyeOffIcon = ({color, size = Scale.l}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg width="28" height="28" viewBox="0 0 25 23" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 25 23" fill="none">
       <Path
         stroke={color ? color : context.colors.main['0']}
         strokeWidth="2"

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

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const FilterIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const FilterIcon: ({ color, size }: IconSVGProps) => JSX.Element;

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

@@ -2,57 +2,20 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
 
-export const FilterIcon = ({color}: IconType) => {
+export const FilterIcon = ({color, size = Scale.l}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
 
-  const d = [
-    'M3.25',
-    '4.25C3.25',
-    '3.69772',
-    '3.69772',
-    '3.25',
-    '4.25',
-    '3.25H21.75C22.3023',
-    '3.25',
-    '22.75',
-    '3.69772',
-    '22.75',
-    '4.25V7.16912C22.75',
-    '7.43434',
-    '22.6446',
-    '7.68869',
-    '22.4571',
-    '7.87623L15.4596',
-    '14.8738C15.272',
-    '15.0613',
-    '15.1667',
-    '15.3157',
-    '15.1667',
-    '15.5809V18.4167L10.8333',
-    '22.75V15.5809C10.8333',
-    '15.3157',
-    '10.728',
-    '15.0613',
-    '10.5404',
-    '14.8738L3.54289',
-    '7.87623C3.35536',
-    '7.68869',
-    '3.25',
-    '7.43434',
-    '3.25',
-    '7.16912V4.25Z',
-  ];
-
   return (
-    <Svg width="28" height="28" viewBox="0 0 26 26" fill="none">
+    <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={d.join(' ')}
+        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

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const InformationCircleIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const InformationCircleIcon: ({ color, size, }: IconSVGProps) => JSX.Element;

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

@@ -2,18 +2,22 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
 
-export const InformationCircleIcon = ({color}: IconType) => {
+export const InformationCircleIcon = ({
+  color,
+  size = Scale.l,
+}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg width="28" height="28" viewBox="0 0 26 26" fill="none">
+    <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="M14.0833 17.3333H13V13H11.9167M13 8.66667H13.0108M22.75 13C22.75 18.3848 18.3848 22.75 13 22.75C7.61522 22.75 3.25 18.3848 3.25 13C3.25 7.61522 7.61522 3.25 13 3.25C18.3848 3.25 22.75 7.61522 22.75 13Z"
+        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

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const LogoutIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const LogoutIcon: ({ color, size }: IconSVGProps) => JSX.Element;

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

@@ -2,18 +2,25 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
 
-export const LogoutIcon = ({color}: IconType) => {
+export const LogoutIcon = ({color, size = Scale.l}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg width="28" height="28" viewBox="0 0 32 34" fill="none">
+    <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="M17.3333 11.077L22.6667 16.6155M22.6667 16.6155L17.3333 22.1539M22.6667 16.6155L4 16.6155M10.6667 11.077V9.69238C10.6667 7.39828 12.4575 5.53854 14.6667 5.53854H24C26.2091 5.53854 28 7.39828 28 9.69238L28 23.5385C28 25.8326 26.2091 27.6924 24 27.6924H14.6667C12.4575 27.6924 10.6667 25.8326 10.6667 23.5385V22.1539"
+        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

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const MailIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const MailIcon: ({ color, size }: IconSVGProps) => JSX.Element;

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

@@ -2,13 +2,14 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
 import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
 
-export const MailIcon = ({color}: IconType) => {
+export const MailIcon = ({color, size = Scale.l}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg width="28" height="28" viewBox="0 0 28 28" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 23 19" fill="none">
       <Path
         stroke={
           color ? HexColor.of(color).toString() : context.colors.main['0']
@@ -16,7 +17,7 @@ export const MailIcon = ({color}: IconType) => {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M3.875 9.5L12.7519 15.4179C13.5077 15.9218 14.4923 15.9218 15.2481 15.4179L24.125 9.5M6.125 21.875H21.875C23.1176 21.875 24.125 20.8676 24.125 19.625V8.375C24.125 7.13236 23.1176 6.125 21.875 6.125H6.125C4.88236 6.125 3.875 7.13236 3.875 8.375V19.625C3.875 20.8676 4.88236 21.875 6.125 21.875Z"
+        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

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const MailOpenIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const MailOpenIcon: ({ color, size }: IconSVGProps) => JSX.Element;

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

@@ -2,13 +2,14 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
 import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
 
-export const MailOpenIcon = ({color}: IconType) => {
+export const MailOpenIcon = ({color, size = Scale.l}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg width="28" height="28" viewBox="0 0 27 26" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 23 22" fill="none">
       <Path
         stroke={
           color ? HexColor.of(color).toString() : context.colors.main['0']
@@ -16,7 +17,7 @@ export const MailOpenIcon = ({color}: IconType) => {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M3.375 20.5833V10.9095C3.375 10.1851 3.75098 9.50861 4.37692 9.10676L12.2519 4.05121C13.0077 3.56602 13.9923 3.56602 14.7481 4.05121L22.6231 9.10676C23.249 9.50861 23.625 10.1851 23.625 10.9095V20.5833M3.375 20.5833C3.375 21.7799 4.38236 22.75 5.625 22.75H21.375C22.6176 22.75 23.625 21.7799 23.625 20.5833M3.375 20.5833L10.9688 15.7083M23.625 20.5833L16.0312 15.7083M3.375 10.8333L10.9688 15.7083M23.625 10.8333L16.0312 15.7083M16.0312 15.7083L14.7481 16.5321C13.9923 17.0173 13.0077 17.0173 12.2519 16.5321L10.9688 15.7083"
+        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

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const MenuIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const MenuIcon: ({ color, size }: IconSVGProps) => JSX.Element;

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

@@ -2,13 +2,14 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
 import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
 
-export const MenuIcon = ({color}: IconType) => {
+export const MenuIcon = ({color, size = Scale.l}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 21 17" fill="none">
       <Path
         stroke={
           color ? HexColor.of(color).toString() : context.colors.main['0']
@@ -16,7 +17,7 @@ export const MenuIcon = ({color}: IconType) => {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M4.5 6.75H22.5M4.5 13.5H22.5M4.5 20.25H22.5"
+        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

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const MinusSmallIcon: ({ color, size }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const MinusSmallIcon: ({ color, size }: IconSVGProps) => JSX.Element;

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

@@ -2,18 +2,14 @@ import * as React from 'react';
 import {useContext} from 'react';
 import Svg, {Path} from 'react-native-svg';
 import {ThemeCtx} from '../../../context/theme.context';
-import {IconType} from '../../../types/icontype.type';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
 import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
 
-export const MinusSmallIcon = ({color, size}: IconType) => {
+export const MinusSmallIcon = ({color, size = Scale.l}: IconSVGProps) => {
   const context = useContext(ThemeCtx);
   return (
-    <Svg
-      width={!size ? 28 : size}
-      height={!size ? 28 : size}
-      viewBox="0 0 26 26"
-      fill="none"
-    >
+    <Svg width={size} height={size} viewBox="0 0 16 3" fill="none">
       <Path
         stroke={
           color ? HexColor.of(color).toString() : context.colors.main['0']
@@ -21,7 +17,7 @@ export const MinusSmallIcon = ({color, size}: IconType) => {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M19.4006 13H6.60059"
+        d="M14.5 1.5H1.5"
       />
     </Svg>
   );

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

@@ -1,2 +1,2 @@
-import { IconType } from '../../../types/icontype.type';
-export declare const OfficeBuildingIcon: ({ color }: IconType) => JSX.Element;
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const OfficeBuildingIcon: ({ color, size }: IconSVGProps) => JSX.Element;