@tactics/toddle-styleguide 0.0.1

package/src/icons/icons.test.js

@@ -0,0 +1,245 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {Icon} from './index';
+
+describe('test icons', () => {
+  const greyColor = 'grey';
+  const whiteColor = 'white';
+
+  it('render an outlined calendar icon in the main color', function () {
+    const tree = render.create(<Icon.Outline.Calendar />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined chat icon in the main color', () => {
+    const tree = render.create(<Icon.Outline.Chat />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined chat-alt icon in a grey color', () => {
+    const tree = render
+      .create(<Icon.Outline.ChatAlt color={greyColor} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined check-circle icon in a grey color', () => {
+    const tree = render
+      .create(<Icon.Outline.CheckCircle 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} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined chevron-right icon in a white color', () => {
+    const tree = render
+      .create(<Icon.Outline.ChevronRight color={whiteColor} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined clock icon in the main color', () => {
+    const tree = render.create(<Icon.Outline.Clock />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined cloud-download icon in a grey color', () => {
+    const tree = render
+      .create(<Icon.Outline.CloudDownload color={greyColor} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined currency-euro icon in a red color', () => {
+    const tree = render
+      .create(<Icon.Outline.CurrencyEuro color={'red'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined document-text icon in a white color', () => {
+    const tree = render
+      .create(<Icon.Outline.DocumentText color={whiteColor} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined exclamation icon in a blue color', () => {
+    const tree = render
+      .create(<Icon.Outline.Exclamation color={'blue'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined exclamation-circle icon in a pink color', () => {
+    const tree = render
+      .create(<Icon.Outline.ExclamationCircle color={'pink'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined eye icon in a purple color', () => {
+    const tree = render.create(<Icon.Outline.Eye color={'purple'} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined filter icon in the main color', () => {
+    const tree = render.create(<Icon.Outline.Filter />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined information-circle icon in the main color', () => {
+    const tree = render.create(<Icon.Outline.InformationCircle />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined logout icon in a red color', () => {
+    const tree = render.create(<Icon.Outline.Logout color={'red'} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined mail icon in a brown color', () => {
+    const tree = render.create(<Icon.Outline.Mail color={'brown'} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined mail-open icon in a grey color', () => {
+    const tree = render
+      .create(<Icon.Outline.MailOpen color={greyColor} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined menu icon in the main color', () => {
+    const tree = render.create(<Icon.Outline.Menu />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined minus-sm icon in the main color', () => {
+    const tree = render.create(<Icon.Outline.MinusSm />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined office-building icon in a green color', () => {
+    const tree = render
+      .create(<Icon.Outline.OfficeBuilding color={'green'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined paper-airplane icon in a white color', () => {
+    const tree = render
+      .create(<Icon.Outline.PaperAirplane color={whiteColor} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined paperclip icon in the main color', () => {
+    const tree = render.create(<Icon.Outline.PaperClip />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined pencil icon in the main color', () => {
+    const tree = render.create(<Icon.Outline.Pencil />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined phone icon in the main color', () => {
+    const tree = render.create(<Icon.Outline.Phone />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined plus icon in a grey color', () => {
+    const tree = render
+      .create(<Icon.Outline.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={'red'} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined qrcode icon in a purple color', () => {
+    const tree = render
+      .create(<Icon.Outline.Qrcode color={'purple'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined refresh icon in a purple color', () => {
+    const tree = render
+      .create(<Icon.Outline.Refresh color={'purple'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined search icon in a white color', () => {
+    const tree = render
+      .create(<Icon.Outline.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();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined sm-view-grid-add icon in a yellow color', () => {
+    const tree = render
+      .create(<Icon.Outline.ViewGridAdd color={'yellow'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined status-online icon in an orange color', () => {
+    const tree = render
+      .create(<Icon.Outline.StatusOnline color={'orange'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined thumb-up icon in a blue color', () => {
+    const tree = render
+      .create(<Icon.Outline.ThumbUp color={'blue'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined trash icon in a red color', () => {
+    const tree = render.create(<Icon.Outline.Trash color={'red'} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined user icon in the main color', () => {
+    const tree = render.create(<Icon.Outline.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} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined users icon in a white color', () => {
+    const tree = render
+      .create(<Icon.Outline.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();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a solid chat-alt icon in a coral color', () => {
+    const tree = render.create(<Icon.Solid.ChatAlt color={'coral'} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a solid clock icon in a darkcyan color', () => {
+    const tree = render
+      .create(<Icon.Solid.Clock color={'darkcyan'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a solid information-circle icon in a gold color', () => {
+    const tree = render.create(<Icon.Solid.Clock color={'gold'} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a solid pencil icon in a grey color', () => {
+    const tree = render
+      .create(<Icon.Solid.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={'ivory'} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a solid refresh icon in the main color', () => {
+    const tree = render.create(<Icon.Solid.Refresh />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a solid status-online icon in a navy color', () => {
+    const tree = render
+      .create(<Icon.Solid.StatusOnline color={'navy'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a solid trash icon in a tomato color', () => {
+    const tree = render.create(<Icon.Solid.Trash color={'tomato'} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/icons/index.tsx

@@ -0,0 +1,7 @@
+import {Outline} from './outline/outline';
+import {Solid} from './solid/solid';
+
+export const Icon = {
+  Outline,
+  Solid,
+};

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

@@ -0,0 +1,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';
+
+export const CalendarIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        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"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,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';
+
+export const ChatIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 28 28" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        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"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/chat-alt/chat-alt.icon.tsx

@@ -0,0 +1,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';
+
+export const ChatAltIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        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"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,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';
+
+export const CheckCircleIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        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"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,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';
+
+export const ChevronLeftIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M16.875 21.375L9 13.5L16.875 5.625"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,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';
+
+export const ChevronRightIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 26 27" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9.75 5.625L17.3333 13.5L9.75 21.375"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,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';
+
+export const ClockIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 26" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        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"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,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';
+
+export const CloudDownloadIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        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"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,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';
+
+export const CrossIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6.75 20.25L20.25 6.75M6.75 6.75L20.25 20.25"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,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';
+
+export const CurrencyEuroIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 26 27" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        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"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,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';
+
+export const DocumentTextIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 32 32" 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"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,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';
+
+export const ExclamationIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 27" 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"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,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';
+
+export const ExclamationCircleIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 26 27" 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"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const EyeIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 27" 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"
+      />
+      <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"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,59 @@
+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';
+
+export const FilterIcon = ({color}: IconType) => {
+  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">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d={d.join(' ')}
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,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';
+
+export const InformationCircleIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 26 26" 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"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,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';
+
+export const LogoutIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 32 34" fill="none">
+      <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"
+      />
+    </Svg>
+  );
+};