@tactics/toddle-styleguide 1.0.0 → 1.0.2

package/src/icons/icons.test.js

@@ -7,247 +7,322 @@ describe('test icons', () => {
   const whiteColor = '#ffffff';
 
   it('render an outlined calendar icon in the main color', function () {
-    const tree = render.create(<Icon.Outline.Calendar />).toJSON();
+    const tree = render
+      .create(<Icon style={'regular'} name={'calendar'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined chat icon in the main color', () => {
-    const tree = render.create(<Icon.Outline.Chat />).toJSON();
+    const tree = render
+      .create(<Icon style={'regular'} name={'chat'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
-  it('render an outlined chat-alt icon in a grey color', () => {
+  it('render an outlined chat-alt icon in a grey color and a size of 20px', () => {
     const tree = render
-      .create(<Icon.Outline.ChatAlt color={greyColor} />)
+      .create(
+        <Icon style={'regular'} name={'chat-alt'} color={greyColor} size={20} />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined check-circle icon in a grey color', () => {
     const tree = render
-      .create(<Icon.Outline.CheckCircle color={greyColor} />)
+      .create(
+        <Icon style={'regular'} name={'check-circle'} color={greyColor} />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined chevron-left icon in a white color', () => {
     const tree = render
-      .create(<Icon.Outline.ChevronLeft color={whiteColor} />)
+      .create(
+        <Icon style={'regular'} name={'chevron-left'} color={whiteColor} />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined chevron-right icon in a white color', () => {
     const tree = render
-      .create(<Icon.Outline.ChevronRight color={whiteColor} />)
+      .create(
+        <Icon style={'regular'} name={'chevron-right'} color={whiteColor} />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined clock icon in the main color', () => {
-    const tree = render.create(<Icon.Outline.Clock />).toJSON();
+    const tree = render
+      .create(<Icon style={'regular'} name={'clock'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
-  it('render an outlined cloud-download icon in a grey color', () => {
+  it('render an outlined cloud-download icon in a grey color with a size of 16px', () => {
     const tree = render
-      .create(<Icon.Outline.CloudDownload color={greyColor} />)
+      .create(
+        <Icon
+          style={'regular'}
+          name={'cloud-download'}
+          color={greyColor}
+          size={16}
+        />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined currency-euro icon in a red color', () => {
     const tree = render
-      .create(<Icon.Outline.CurrencyEuro color={'#FF0000'} />)
+      .create(
+        <Icon style={'regular'} name={'currency-euro'} color={'#FF0000'} />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
-  it('render an outlined document-text icon in a white color', () => {
+  it('render a solid document-text icon in a white color', () => {
     const tree = render
-      .create(<Icon.Outline.DocumentText color={whiteColor} />)
+      .create(
+        <Icon style={'solid'} name={'document-text'} color={whiteColor} />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined exclamation icon in a blue color', () => {
     const tree = render
-      .create(<Icon.Outline.Exclamation color={'#0000FF'} />)
+      .create(<Icon style={'regular'} name={'exclamation'} color={'#0000FF'} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined exclamation-circle icon in a pink color', () => {
     const tree = render
-      .create(<Icon.Outline.ExclamationCircle color={'#FFC0CB'} />)
+      .create(
+        <Icon style={'regular'} name={'exclamation-circle'} color={'#FFC0CB'} />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined eye icon in a purple color', () => {
-    const tree = render.create(<Icon.Outline.Eye color={'#A020F0'} />).toJSON();
+    const tree = render
+      .create(<Icon style={'regular'} name={'eye'} color={'#A020F0'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined filter icon in the main color', () => {
-    const tree = render.create(<Icon.Outline.Filter />).toJSON();
+    const tree = render
+      .create(<Icon style={'regular'} name={'filter'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined information-circle icon in the main color', () => {
-    const tree = render.create(<Icon.Outline.InformationCircle />).toJSON();
+    const tree = render
+      .create(<Icon style={'regular'} name={'information-circle'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined logout icon in a red color', () => {
     const tree = render
-      .create(<Icon.Outline.Logout color={'#FF0000'} />)
+      .create(<Icon style={'regular'} name={'logout'} color={'#FF0000'} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined mail icon in a brown color', () => {
     const tree = render
-      .create(<Icon.Outline.Mail color={'#964B00'} />)
+      .create(<Icon style={'regular'} name={'mail'} color={'#964B00'} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined mail-open icon in a grey color', () => {
     const tree = render
-      .create(<Icon.Outline.MailOpen color={greyColor} />)
+      .create(<Icon style={'regular'} name={'mail-open'} color={greyColor} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined menu icon in the main color', () => {
-    const tree = render.create(<Icon.Outline.Menu />).toJSON();
+    const tree = render
+      .create(<Icon style={'regular'} name={'menu'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined minus-sm icon in the main color', () => {
-    const tree = render.create(<Icon.Outline.MinusSm />).toJSON();
+    const tree = render
+      .create(<Icon style={'regular'} name={'minus-sm'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined office-building icon in a green color', () => {
     const tree = render
-      .create(<Icon.Outline.OfficeBuilding color={'#00FF00'} />)
+      .create(
+        <Icon style={'regular'} name={'office-building'} color={'#00FF00'} />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined paper-airplane icon in a white color', () => {
     const tree = render
-      .create(<Icon.Outline.PaperAirplane color={whiteColor} />)
+      .create(
+        <Icon style={'regular'} name={'paper-airplane'} color={whiteColor} />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined paperclip icon in the main color', () => {
-    const tree = render.create(<Icon.Outline.PaperClip />).toJSON();
+    const tree = render
+      .create(<Icon style={'regular'} name={'paper-clip'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined pencil icon in the main color', () => {
-    const tree = render.create(<Icon.Outline.Pencil />).toJSON();
+    const tree = render
+      .create(<Icon style={'regular'} name={'pencil'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined phone icon in the main color', () => {
-    const tree = render.create(<Icon.Outline.Phone />).toJSON();
+    const tree = render
+      .create(<Icon style={'regular'} name={'phone'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined plus icon in a grey color', () => {
     const tree = render
-      .create(<Icon.Outline.Plus color={greyColor} />)
+      .create(<Icon style={'regular'} name={'plus'} color={greyColor} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined plus-sm icon in a red color', () => {
     const tree = render
-      .create(<Icon.Outline.PlusSm color={'#FF0000'} />)
+      .create(<Icon style={'regular'} name={'plus-sm'} color={'#FF0000'} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined qrcode icon in a purple color', () => {
     const tree = render
-      .create(<Icon.Outline.Qrcode color={'#A020F0'} />)
+      .create(<Icon style={'regular'} name={'qrcode'} color={'#A020F0'} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined refresh icon in a purple color', () => {
     const tree = render
-      .create(<Icon.Outline.Refresh color={'#A020F0'} />)
+      .create(<Icon style={'regular'} name={'refresh'} color={'#A020F0'} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined search icon in a white color', () => {
     const tree = render
-      .create(<Icon.Outline.Search color={whiteColor} />)
+      .create(<Icon style={'regular'} name={'search'} color={whiteColor} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined selector icon in the main color', () => {
-    const tree = render.create(<Icon.Outline.Selector />).toJSON();
+    const tree = render
+      .create(<Icon style={'regular'} name={'selector'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined sm-view-grid-add icon in a yellow color', () => {
     const tree = render
-      .create(<Icon.Outline.ViewGridAdd color={'#FFFF00'} />)
+      .create(
+        <Icon style={'regular'} name={'sm-view-grid-add'} color={'#FFFF00'} />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined status-online icon in an orange color', () => {
     const tree = render
-      .create(<Icon.Outline.StatusOnline color={'#FFA500'} />)
+      .create(
+        <Icon style={'regular'} name={'status-online'} color={'#FFA500'} />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined thumb-up icon in a blue color', () => {
     const tree = render
-      .create(<Icon.Outline.ThumbUp color={'#0000FF'} />)
+      .create(<Icon style={'regular'} name={'thumb-up'} color={'#0000FF'} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined trash icon in a red color', () => {
     const tree = render
-      .create(<Icon.Outline.Trash color={'#FF0000'} />)
+      .create(<Icon style={'regular'} name={'trash'} color={'#FF0000'} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined user icon in the main color', () => {
-    const tree = render.create(<Icon.Outline.User />).toJSON();
+    const tree = render
+      .create(<Icon style={'regular'} name={'user'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined user-group icon in a grey color', () => {
     const tree = render
-      .create(<Icon.Outline.UserGroup color={greyColor} />)
+      .create(<Icon style={'regular'} name={'user-group'} color={greyColor} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render an outlined users icon in a white color', () => {
     const tree = render
-      .create(<Icon.Outline.Users color={whiteColor} />)
+      .create(<Icon style={'regular'} name={'users'} color={whiteColor} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
-  it('render an outlined cross icon in the main color', () => {
-    const tree = render.create(<Icon.Outline.Cross />).toJSON();
+  it('render an outlined xmark icon in the main color', () => {
+    const tree = render
+      .create(<Icon style={'regular'} name={'xmark'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render a solid chat-alt icon in a coral color', () => {
     const tree = render
-      .create(<Icon.Solid.ChatAlt color={'#FF7F50'} />)
+      .create(<Icon style={'solid'} name={'chat-alt'} color={'#FF7F50'} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render a solid clock icon in a darkcyan color', () => {
-    const tree = render.create(<Icon.Solid.Clock color={'#008b8b'} />).toJSON();
+    const tree = render
+      .create(<Icon style={'solid'} name={'clock'} color={'#008b8b'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render a solid information-circle icon in a gold color', () => {
-    const tree = render.create(<Icon.Solid.Clock color={'#FFD700'} />).toJSON();
+    const tree = render
+      .create(
+        <Icon style={'solid'} name={'information-circle'} color={'#FFD700'} />
+      )
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render a solid pencil icon in a grey color', () => {
     const tree = render
-      .create(<Icon.Solid.Pencil color={greyColor} />)
+      .create(<Icon style={'solid'} name={'pencil'} color={greyColor} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render a solid phone icon in an ivory color', () => {
-    const tree = render.create(<Icon.Solid.Phone color={'#FFFFF0'} />).toJSON();
+    const tree = render
+      .create(<Icon style={'solid'} name={'phone'} color={'#FFFFF0'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render a solid refresh icon in the main color', () => {
-    const tree = render.create(<Icon.Solid.Refresh />).toJSON();
+    const tree = render
+      .create(<Icon style={'solid'} name={'refresh'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render a solid status-online icon in a navy color', () => {
     const tree = render
-      .create(<Icon.Solid.StatusOnline color={'#000080'} />)
+      .create(<Icon style={'solid'} name={'status-online'} color={'#000080'} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('render a solid trash icon in a tomato color', () => {
-    const tree = render.create(<Icon.Solid.Trash color={'#FF6347'} />).toJSON();
+    const tree = render
+      .create(<Icon style={'solid'} name={'trash'} color={'#FF6347'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a solid eye off icon in a tomato color', () => {
+    const tree = render
+      .create(<Icon style={'solid'} name={'eye-off'} color={'#FF6347'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
 });

package/src/icons/index.d.ts

@@ -1,56 +1,2 @@
-export declare const Icon: {
-    Outline: {
-        Calendar: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Chat: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        ChatAlt: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        CheckCircle: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        ChevronLeft: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        ChevronRight: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Clock: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        CloudDownload: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        CurrencyEuro: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        DocumentText: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Exclamation: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        ExclamationCircle: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Eye: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        EyeOff: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Filter: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        InformationCircle: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Logout: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Mail: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        MailOpen: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Menu: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        MinusSm: ({ color, size }: import("../types/icontype.type").IconType) => JSX.Element;
-        OfficeBuilding: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        PaperAirplane: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        PaperClip: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Pencil: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Phone: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Plus: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        PlusSm: ({ color, size }: import("../types/icontype.type").IconType) => JSX.Element;
-        Qrcode: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Refresh: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Search: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Selector: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        ViewGridAdd: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        StatusOnline: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        ThumbUp: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Trash: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        User: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        UserGroup: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Users: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Cross: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-    };
-    Solid: {
-        ChatAlt: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Clock: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        DocumentText: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        InformationCircle: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Pencil: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Phone: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Refresh: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        StatusOnline: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Trash: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-        Users: ({ color }: import("../types/icontype.type").IconType) => JSX.Element;
-    };
-};
+import { IconInterface } from '../interfaces/icon.interface';
+export declare const Icon: ({ style, name, size, color }: IconInterface) => JSX.Element;

package/src/icons/index.tsx

@@ -1,7 +1,15 @@
+import {IconInterface} from '../interfaces/icon.interface';
 import {Outline} from './outline/outline';
 import {Solid} from './solid/solid';
 
-export const Icon = {
-  Outline,
-  Solid,
+export const Icon = ({style, name, size, color}: IconInterface) => {
+  const renderIconStyle = () => {
+    switch (style) {
+      case 'regular':
+        return <Outline name={name} size={size} color={color} />;
+      case 'solid':
+        return <Solid name={name} size={size} color={color} />;
+    }
+  };
+  return renderIconStyle();
 };

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

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

package/src/icons/outline/calendar/calendar.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 CalendarIcon = ({color}: IconType) => {
+export const CalendarIcon = ({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 24 24" fill="none">
       <Path
         stroke={
           color ? HexColor.of(color).toString() : context.colors.main['0']
@@ -16,7 +17,7 @@ export const CalendarIcon = ({color}: IconType) => {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M9.16667 7.875V3.375M17.8333 7.875V3.375M8.08333 12.375H18.9167M5.91667 23.625H21.0833C22.28 23.625 23.25 22.6176 23.25 21.375V7.875C23.25 6.63236 22.28 5.625 21.0833 5.625H5.91667C4.72005 5.625 3.75 6.63236 3.75 7.875V21.375C3.75 22.6176 4.72005 23.625 5.91667 23.625Z"
+        d="M7.33333 6.16667V1.5M16.6667 6.16667V1.5M6.16667 10.8333H17.8333M3.83333 22.5H20.1667C21.4553 22.5 22.5 21.4553 22.5 20.1667V6.16667C22.5 4.878 21.4553 3.83333 20.1667 3.83333H3.83333C2.54467 3.83333 1.5 4.878 1.5 6.16667V20.1667C1.5 21.4553 2.54467 22.5 3.83333 22.5Z"
       />
     </Svg>
   );

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

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

package/src/icons/outline/chat/chat.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 ChatIcon = ({color}: IconType) => {
+export const ChatIcon = ({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 21" fill="none">
       <Path
         stroke={
           color ? HexColor.of(color).toString() : context.colors.main['0']
@@ -16,7 +17,7 @@ export const ChatIcon = ({color}: IconType) => {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M9.5 14H9.51125M14 14H14.0113M18.5 14H18.5113M24.125 14C24.125 18.9706 19.5919 23 14 23C12.2683 23 10.6382 22.6136 9.21275 21.9324L3.875 23L5.44436 18.815C4.45051 17.4226 3.875 15.7711 3.875 14C3.875 9.02944 8.40812 5 14 5C19.5919 5 24.125 9.02944 24.125 14Z"
+        d="M7 10.5H7.01125M11.5 10.5H11.5113M16 10.5H16.0113M21.625 10.5C21.625 15.4706 17.0919 19.5 11.5 19.5C9.76832 19.5 8.13818 19.1136 6.71275 18.4324L1.375 19.5L2.94436 15.315C1.95051 13.9226 1.375 12.2711 1.375 10.5C1.375 5.52944 5.90812 1.5 11.5 1.5C17.0919 1.5 21.625 5.52944 21.625 10.5Z"
       />
     </Svg>
   );

package/src/icons/outline/chat-alt/chat-alt.icon.d.ts

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

package/src/icons/outline/chat-alt/chat-alt.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 ChatAltIcon = ({color}: IconType) => {
+export const ChatAltIcon = ({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 22" fill="none">
       <Path
         stroke={
           color ? HexColor.of(color).toString() : context.colors.main['0']
@@ -16,7 +17,7 @@ export const ChatAltIcon = ({color}: IconType) => {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M9 11.25H9.01125M13.5 11.25H13.5113M18 11.25H18.0113M10.125 18H5.625C4.38236 18 3.375 16.9926 3.375 15.75V6.75C3.375 5.50736 4.38236 4.5 5.625 4.5H21.375C22.6176 4.5 23.625 5.50736 23.625 6.75V15.75C23.625 16.9926 22.6176 18 21.375 18H15.75L10.125 23.625V18Z"
+        d="M7 8.25H7.01125M11.5 8.25H11.5113M16 8.25H16.0113M8.125 15H3.625C2.38236 15 1.375 13.9926 1.375 12.75V3.75C1.375 2.50736 2.38236 1.5 3.625 1.5H19.375C20.6176 1.5 21.625 2.50736 21.625 3.75V12.75C21.625 13.9926 20.6176 15 19.375 15H13.75L8.125 20.625V15Z"
       />
     </Svg>
   );

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

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

package/src/icons/outline/check-circle/check-circle.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 CheckCircleIcon = ({color}: IconType) => {
+export const CheckCircleIcon = ({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 23" fill="none">
       <Path
         stroke={
           color ? HexColor.of(color).toString() : context.colors.main['0']
@@ -16,7 +17,7 @@ export const CheckCircleIcon = ({color}: IconType) => {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M10.125 13.5L12.375 15.75L16.875 11.25M23.625 13.5C23.625 19.0919 19.0919 23.625 13.5 23.625C7.90812 23.625 3.375 19.0919 3.375 13.5C3.375 7.90812 7.90812 3.375 13.5 3.375C19.0919 3.375 23.625 7.90812 23.625 13.5Z"
+        d="M8.125 11.5L10.375 13.75L14.875 9.25M21.625 11.5C21.625 17.0919 17.0919 21.625 11.5 21.625C5.90812 21.625 1.375 17.0919 1.375 11.5C1.375 5.90812 5.90812 1.375 11.5 1.375C17.0919 1.375 21.625 5.90812 21.625 11.5Z"
       />
     </Svg>
   );

package/src/icons/outline/chevron-left/chevron-left.icon.d.ts

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

package/src/icons/outline/chevron-left/chevron-left.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 ChevronLeftIcon = ({color}: IconType) => {
+export const ChevronLeftIcon = ({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 10 19" fill="none">
       <Path
         stroke={
           color ? HexColor.of(color).toString() : context.colors.main['0']
@@ -16,7 +17,7 @@ export const ChevronLeftIcon = ({color}: IconType) => {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M16.875 21.375L9 13.5L16.875 5.625"
+        d="M8.875 17.375L1 9.5L8.875 1.625"
       />
     </Svg>
   );

package/src/icons/outline/chevron-right/chevron-right.icon.d.ts

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