@tactics/toddle-styleguide 0.0.1

package/src/icons/outline/mail/mail.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 MailIcon = ({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="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"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/mail-open/mail-open.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 MailOpenIcon = ({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="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"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/menu/menu.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 MenuIcon = ({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="M4.5 6.75H22.5M4.5 13.5H22.5M4.5 20.25H22.5"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/minus-sm/minus-sm.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 MinusSmallIcon = ({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="M19.4006 13H6.60059"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/office-building/office-building.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 OfficeBuildingIcon = ({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="M21.375 23.625V5.625C21.375 4.38236 20.3676 3.375 19.125 3.375H7.875C6.63236 3.375 5.625 4.38236 5.625 5.625V23.625M21.375 23.625L23.625 23.625M21.375 23.625H15.75M5.625 23.625L3.375 23.625M5.625 23.625H11.25M10.125 7.87497H11.25M10.125 12.375H11.25M15.75 7.87497H16.875M15.75 12.375H16.875M11.25 23.625V18C11.25 17.3787 11.7537 16.875 12.375 16.875H14.625C15.2463 16.875 15.75 17.3787 15.75 18V23.625M11.25 23.625H15.75"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/outline-default.preview.tsx

@@ -0,0 +1,99 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {Icon} from '..';
+import {ThemeCtx} from '../../context/theme.context';
+
+export const IconOutlineDefaultPreview = ({}: {}) => {
+  const Context = useContext(ThemeCtx);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        padding: 20,
+        flexDirection: 'row',
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          alignContent: 'center',
+          backgroundColor: Context.colors.main['9'],
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon.Outline.Filter />
+          <Icon.Outline.Pencil />
+          <Icon.Outline.Search />
+          <Icon.Outline.PaperClip />
+          <Icon.Outline.PaperAirplane />
+          <Icon.Outline.Eye />
+          <Icon.Outline.Selector />
+          <Icon.Outline.ChevronLeft />
+          <Icon.Outline.ChevronRight />
+          <Icon.Outline.Phone />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon.Outline.Mail />
+          <Icon.Outline.Chat />
+          <Icon.Outline.Clock />
+          <Icon.Outline.ChatAlt />
+          <Icon.Outline.InformationCircle />
+          <Icon.Outline.PlusSm />
+          <Icon.Outline.User />
+          <Icon.Outline.CloudDownload />
+          <Icon.Outline.CurrencyEuro />
+          <Icon.Outline.Refresh />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon.Outline.CheckCircle />
+          <Icon.Outline.Exclamation />
+          <Icon.Outline.ExclamationCircle />
+          <Icon.Outline.ThumbUp />
+          <Icon.Outline.Trash />
+          <Icon.Outline.Cross />
+          <Icon.Outline.OfficeBuilding />
+          <Icon.Outline.UserGroup />
+          <Icon.Outline.Logout />
+          <Icon.Outline.Calendar />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon.Outline.Menu />
+          <Icon.Outline.ViewGridAdd />
+          <Icon.Outline.MinusSm />
+          <Icon.Outline.StatusOnline />
+          <Icon.Outline.Qrcode />
+          <Icon.Outline.DocumentText />
+          <Icon.Outline.Users />
+          <Icon.Outline.MailOpen />
+          <Icon.Outline.Plus />
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/icons/outline/outline-grey.preview.tsx

@@ -0,0 +1,100 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {Icon} from '..';
+import {ThemeCtx} from '../../context/theme.context';
+
+export const IconOutlineGreyPreview = ({}: {}) => {
+  const Context = useContext(ThemeCtx);
+  const greyColor = Context.colors.ui.darkgrey;
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        padding: 20,
+        flexDirection: 'row',
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          alignContent: 'center',
+          backgroundColor: Context.colors.ui.lightgrey,
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon.Outline.Filter color={greyColor} />
+          <Icon.Outline.Pencil color={greyColor} />
+          <Icon.Outline.Search color={greyColor} />
+          <Icon.Outline.PaperClip color={greyColor} />
+          <Icon.Outline.PaperAirplane color={greyColor} />
+          <Icon.Outline.Eye color={greyColor} />
+          <Icon.Outline.Selector color={greyColor} />
+          <Icon.Outline.ChevronLeft color={greyColor} />
+          <Icon.Outline.ChevronRight color={greyColor} />
+          <Icon.Outline.Phone color={greyColor} />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon.Outline.Mail color={greyColor} />
+          <Icon.Outline.Chat color={greyColor} />
+          <Icon.Outline.Clock color={greyColor} />
+          <Icon.Outline.ChatAlt color={greyColor} />
+          <Icon.Outline.InformationCircle color={greyColor} />
+          <Icon.Outline.PlusSm color={greyColor} />
+          <Icon.Outline.User color={greyColor} />
+          <Icon.Outline.CloudDownload color={greyColor} />
+          <Icon.Outline.CurrencyEuro color={greyColor} />
+          <Icon.Outline.Refresh color={greyColor} />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon.Outline.CheckCircle color={greyColor} />
+          <Icon.Outline.Exclamation color={greyColor} />
+          <Icon.Outline.ExclamationCircle color={greyColor} />
+          <Icon.Outline.ThumbUp color={greyColor} />
+          <Icon.Outline.Trash color={greyColor} />
+          <Icon.Outline.Cross color={greyColor} />
+          <Icon.Outline.OfficeBuilding color={greyColor} />
+          <Icon.Outline.UserGroup color={greyColor} />
+          <Icon.Outline.Logout color={greyColor} />
+          <Icon.Outline.Calendar color={greyColor} />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon.Outline.Menu color={greyColor} />
+          <Icon.Outline.ViewGridAdd color={greyColor} />
+          <Icon.Outline.MinusSm color={greyColor} />
+          <Icon.Outline.StatusOnline color={greyColor} />
+          <Icon.Outline.Qrcode color={greyColor} />
+          <Icon.Outline.DocumentText color={greyColor} />
+          <Icon.Outline.Users color={greyColor} />
+          <Icon.Outline.MailOpen color={greyColor} />
+          <Icon.Outline.Plus color={greyColor} />
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/icons/outline/outline-white.preview.tsx

@@ -0,0 +1,100 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {Icon} from '..';
+import {ThemeCtx} from '../../context/theme.context';
+
+export const IconOutlineWhitePreview = ({}: {}) => {
+  const Context = useContext(ThemeCtx);
+  const whiteColor = Context.colors.ui.white;
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        padding: 20,
+        flexDirection: 'row',
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          alignContent: 'center',
+          backgroundColor: Context.colors.main['0'],
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon.Outline.Filter color={whiteColor} />
+          <Icon.Outline.Pencil color={whiteColor} />
+          <Icon.Outline.Search color={whiteColor} />
+          <Icon.Outline.PaperClip color={whiteColor} />
+          <Icon.Outline.PaperAirplane color={whiteColor} />
+          <Icon.Outline.Eye color={whiteColor} />
+          <Icon.Outline.Selector color={whiteColor} />
+          <Icon.Outline.ChevronLeft color={whiteColor} />
+          <Icon.Outline.ChevronRight color={whiteColor} />
+          <Icon.Outline.Phone color={whiteColor} />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon.Outline.Mail color={whiteColor} />
+          <Icon.Outline.Chat color={whiteColor} />
+          <Icon.Outline.Clock color={whiteColor} />
+          <Icon.Outline.ChatAlt color={whiteColor} />
+          <Icon.Outline.InformationCircle color={whiteColor} />
+          <Icon.Outline.PlusSm color={whiteColor} />
+          <Icon.Outline.User color={whiteColor} />
+          <Icon.Outline.CloudDownload color={whiteColor} />
+          <Icon.Outline.CurrencyEuro color={whiteColor} />
+          <Icon.Outline.Refresh color={whiteColor} />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon.Outline.CheckCircle color={whiteColor} />
+          <Icon.Outline.Exclamation color={whiteColor} />
+          <Icon.Outline.ExclamationCircle color={whiteColor} />
+          <Icon.Outline.ThumbUp color={whiteColor} />
+          <Icon.Outline.Trash color={whiteColor} />
+          <Icon.Outline.Cross color={whiteColor} />
+          <Icon.Outline.OfficeBuilding color={whiteColor} />
+          <Icon.Outline.UserGroup color={whiteColor} />
+          <Icon.Outline.Logout color={whiteColor} />
+          <Icon.Outline.Calendar color={whiteColor} />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon.Outline.Menu color={whiteColor} />
+          <Icon.Outline.ViewGridAdd color={whiteColor} />
+          <Icon.Outline.MinusSm color={whiteColor} />
+          <Icon.Outline.StatusOnline color={whiteColor} />
+          <Icon.Outline.Qrcode color={whiteColor} />
+          <Icon.Outline.DocumentText color={whiteColor} />
+          <Icon.Outline.Users color={whiteColor} />
+          <Icon.Outline.MailOpen color={whiteColor} />
+          <Icon.Outline.Plus color={whiteColor} />
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/icons/outline/outline.tsx

@@ -0,0 +1,81 @@
+import {CalendarIcon as Calendar} from './calendar/calendar.icon';
+import {ChatIcon as Chat} from './chat/chat.icon';
+import {ChatAltIcon as ChatAlt} from './chat-alt/chat-alt.icon';
+import {CheckCircleIcon as CheckCircle} from './check-circle/check-circle.icon';
+import {ChevronLeftIcon as ChevronLeft} from './chevron-left/chevron-left.icon';
+import {ChevronRightIcon as ChevronRight} from './chevron-right/chevron-right.icon';
+import {ClockIcon as Clock} from './clock/clock.icon';
+import {CloudDownloadIcon as CloudDownload} from './cloud-download/cloud-download.icon';
+import {CurrencyEuroIcon as CurrencyEuro} from './currency-euro/currency-euro.icon';
+import {DocumentTextIcon as DocumentText} from './document-text/document-text.icon';
+import {ExclamationIcon as Exclamation} from './exclamation/exclamation.icon';
+import {ExclamationCircleIcon as ExclamationCircle} from './exclamation-circle/exclamation-circle.icon';
+import {EyeIcon as Eye} from './eye/eye.icon';
+import {FilterIcon as Filter} from './filter/filter.icon';
+import {InformationCircleIcon as InformationCircle} from './information-circle/information-circle.icon';
+import {LogoutIcon as Logout} from './logout/logout.icon';
+import {MailIcon as Mail} from './mail/mail.icon';
+import {MailOpenIcon as MailOpen} from './mail-open/mail-open.icon';
+import {MenuIcon as Menu} from './menu/menu.icon';
+import {MinusSmallIcon as MinusSm} from './minus-sm/minus-sm.icon';
+import {OfficeBuildingIcon as OfficeBuilding} from './office-building/office-building.icon';
+import {PaperAirplaneIcon as PaperAirplane} from './paper-airplane/paper-airplane.icon';
+import {PaperClipIcon as PaperClip} from './paperclip/paperclip.icon';
+import {PencilIcon as Pencil} from './pencil/pencil.icon';
+import {PhoneIcon as Phone} from './phone/phone.icon';
+import {PlusIcon as Plus} from './plus/plus.icon';
+import {PlusSmallIcon as PlusSm} from './plus-sm/plus-sm.icon';
+import {QrcodeIcon as Qrcode} from './qrcode/qrcode.icon';
+import {RefreshIcon as Refresh} from './refresh/refresh.icon';
+import {SearchIcon as Search} from './search/search.icon';
+import {SelectorIcon as Selector} from './selector/selector.icon';
+import {SmViewGridAddIcon as ViewGridAdd} from './sm-view-grid-add/sm-view-grid-add.icon';
+import {StatusOnlineIcon as StatusOnline} from './status-online/status-online.icon';
+import {ThumbUpIcon as ThumbUp} from './thumb-up/thumb-up.icon';
+import {TrashIcon as Trash} from './trash/trash.icon';
+import {UserIcon as User} from './user/user.icon';
+import {UserGroupIcon as UserGroup} from './user-group/user-group.icon';
+import {UsersIcon as Users} from './users/users.icon';
+import {CrossIcon as Cross} from './cross/cross.icon';
+
+export const Outline = {
+  Calendar,
+  Chat,
+  ChatAlt,
+  CheckCircle,
+  ChevronLeft,
+  ChevronRight,
+  Clock,
+  CloudDownload,
+  CurrencyEuro,
+  DocumentText,
+  Exclamation,
+  ExclamationCircle,
+  Eye,
+  Filter,
+  InformationCircle,
+  Logout,
+  Mail,
+  MailOpen,
+  Menu,
+  MinusSm,
+  OfficeBuilding,
+  PaperAirplane,
+  PaperClip,
+  Pencil,
+  Phone,
+  Plus,
+  PlusSm,
+  Qrcode,
+  Refresh,
+  Search,
+  Selector,
+  ViewGridAdd,
+  StatusOnline,
+  ThumbUp,
+  Trash,
+  User,
+  UserGroup,
+  Users,
+  Cross,
+};

package/src/icons/outline/paper-airplane/paper-airplane.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 PaperAirplaneIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 28" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6.29167 14L4.125 24.125L23.625 14L4.125 3.875L6.29167 14ZM6.29167 14L14.9583 14"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/paperclip/paperclip.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 PaperClipIcon = ({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="M16.4359 7.58333L9.30125 14.7179C8.45511 15.5641 8.45511 16.9359 9.30125 17.7821C10.1474 18.6282 11.5192 18.6282 12.3654 17.7821L19.3141 10.6475C21.0064 8.95519 21.0064 6.21148 19.3141 4.5192C17.6218 2.82693 14.8781 2.82693 13.1859 4.5192L6.23712 11.6538C3.69871 14.1922 3.69871 18.3078 6.23712 20.8462C8.77553 23.3846 12.8911 23.3846 15.4295 20.8462L22.2083 14.0833"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/pencil/pencil.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 PencilIcon = ({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="M17.6362 6.38626L21.6137 10.3637M19.3237 4.69876C20.422 3.60041 22.2028 3.60041 23.3012 4.69876C24.3995 5.79711 24.3995 7.57789 23.3012 8.67624L7.8125 24.1649H3.875V20.1475L19.3237 4.69876Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/phone/phone.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 PhoneIcon = ({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="M3.375 5.41667C3.375 4.22005 4.38236 3.25 5.625 3.25H9.31415C9.79838 3.25 10.2283 3.54838 10.3814 3.99075L12.0665 8.85865C12.2435 9.3701 12.0031 9.92909 11.5023 10.1702L8.96288 11.3929C10.2029 14.0413 12.4186 16.175 15.1689 17.3691L16.4387 14.9237C16.689 14.4415 17.2695 14.21 17.8006 14.3805L22.8558 16.0031C23.3151 16.1505 23.625 16.5645 23.625 17.0308V20.5833C23.625 21.7799 22.6176 22.75 21.375 22.75H20.25C10.9302 22.75 3.375 15.4746 3.375 6.5V5.41667Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/plus/plus.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 PlusIcon = ({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="M14 5V23M23 14L5 14"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/plus-sm/plus-sm.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 PlusSmallIcon = ({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.5 6.75V13.5M13.5 13.5V20.25M13.5 13.5H20.25M13.5 13.5L6.75 13.5"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,17 @@
+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 QrcodeIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 26 27" fill="none">
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        d="M14 4.5C14 3.94772 13.5523 3.5 13 3.5C12.4477 3.5 12 3.94772 12 4.5H14ZM12 5.625C12 6.17728 12.4477 6.625 13 6.625C13.5523 6.625 14 6.17728 14 5.625H12ZM19.5 17C18.9477 17 18.5 17.4477 18.5 18C18.5 18.5523 18.9477 19 19.5 19V17ZM21.6666 19C22.2189 19 22.6666 18.5523 22.6666 18C22.6666 17.4477 22.2189 17 21.6666 17V19ZM13 18V17C12.4477 17 12 17.4477 12 18H13ZM15.1666 19C15.7189 19 16.1666 18.5523 16.1666 18C16.1666 17.4477 15.7189 17 15.1666 17V19ZM12 22.5C12 23.0523 12.4477 23.5 13 23.5C13.5523 23.5 14 23.0523 14 22.5H12ZM14 10.125C14 9.57272 13.5523 9.125 13 9.125C12.4477 9.125 12 9.57272 12 10.125H14ZM13 13.5H12C12 14.0523 12.4477 14.5 13 14.5V13.5ZM17.3333 21.5C16.781 21.5 16.3333 21.9477 16.3333 22.5C16.3333 23.0523 16.781 23.5 17.3333 23.5V21.5ZM21.6666 23.5C22.2189 23.5 22.6666 23.0523 22.6666 22.5C22.6666 21.9477 22.2189 21.5 21.6666 21.5V23.5ZM4.33331 12.5C3.78103 12.5 3.33331 12.9477 3.33331 13.5C3.33331 14.0523 3.78103 14.5 4.33331 14.5V12.5ZM8.66665 14.5C9.21893 14.5 9.66665 14.0523 9.66665 13.5C9.66665 12.9477 9.21893 12.5 8.66665 12.5V14.5ZM13.0108 14.5C13.5631 14.5 14.0108 14.0523 14.0108 13.5C14.0108 12.9477 13.5631 12.5 13.0108 12.5V14.5ZM17.3441 14.5C17.8964 14.5 18.3441 14.0523 18.3441 13.5C18.3441 12.9477 17.8964 12.5 17.3441 12.5V14.5ZM21.6666 12.5C21.1144 12.5 20.6666 12.9477 20.6666 13.5C20.6666 14.0523 21.1144 14.5 21.6666 14.5V12.5ZM21.6775 14.5C22.2298 14.5 22.6775 14.0523 22.6775 13.5C22.6775 12.9477 22.2298 12.5 21.6775 12.5V14.5ZM5.41665 5.5H7.58331V3.5H5.41665V5.5ZM7.66665 5.625V7.875H9.66665V5.625H7.66665ZM7.58331 8H5.41665V10H7.58331V8ZM5.33331 7.875V5.625H3.33331V7.875H5.33331ZM5.41665 8C5.40602 8 5.39043 7.9971 5.37093 7.97685C5.3508 7.95595 5.33331 7.92194 5.33331 7.875H3.33331C3.33331 9.0127 4.23082 10 5.41665 10V8ZM7.66665 7.875C7.66665 7.92194 7.64916 7.95595 7.62902 7.97685C7.60953 7.9971 7.59394 8 7.58331 8V10C8.76914 10 9.66665 9.0127 9.66665 7.875H7.66665ZM7.58331 5.5C7.59394 5.5 7.60953 5.5029 7.62902 5.52315C7.64916 5.54405 7.66665 5.57806 7.66665 5.625H9.66665C9.66665 4.4873 8.76914 3.5 7.58331 3.5V5.5ZM5.41665 3.5C4.23082 3.5 3.33331 4.4873 3.33331 5.625H5.33331C5.33331 5.57806 5.3508 5.54405 5.37093 5.52315C5.39043 5.5029 5.40602 5.5 5.41665 5.5V3.5ZM18.4166 5.5H20.5833V3.5H18.4166V5.5ZM20.6666 5.625V7.875H22.6666V5.625H20.6666ZM20.5833 8H18.4166V10H20.5833V8ZM18.3333 7.875V5.625H16.3333V7.875H18.3333ZM18.4166 8C18.406 8 18.3904 7.9971 18.3709 7.97685C18.3508 7.95595 18.3333 7.92194 18.3333 7.875H16.3333C16.3333 9.0127 17.2308 10 18.4166 10V8ZM20.6666 7.875C20.6666 7.92194 20.6492 7.95595 20.629 7.97685C20.6095 7.9971 20.5939 8 20.5833 8V10C21.7691 10 22.6666 9.0127 22.6666 7.875H20.6666ZM20.5833 5.5C20.5939 5.5 20.6095 5.5029 20.629 5.52315C20.6492 5.54405 20.6666 5.57806 20.6666 5.625H22.6666C22.6666 4.4873 21.7691 3.5 20.5833 3.5V5.5ZM18.4166 3.5C17.2308 3.5 16.3333 4.4873 16.3333 5.625H18.3333C18.3333 5.57806 18.3508 5.54405 18.3709 5.52315C18.3904 5.5029 18.406 5.5 18.4166 5.5V3.5ZM5.41665 19H7.58331V17H5.41665V19ZM7.66665 19.125V21.375H9.66665V19.125H7.66665ZM7.58331 21.5H5.41665V23.5H7.58331V21.5ZM5.33331 21.375V19.125H3.33331V21.375H5.33331ZM5.41665 21.5C5.40602 21.5 5.39043 21.4971 5.37093 21.4769C5.3508 21.4559 5.33331 21.4219 5.33331 21.375H3.33331C3.33331 22.5127 4.23082 23.5 5.41665 23.5V21.5ZM7.66665 21.375C7.66665 21.4219 7.64916 21.4559 7.62902 21.4769C7.60953 21.4971 7.59394 21.5 7.58331 21.5V23.5C8.76914 23.5 9.66665 22.5127 9.66665 21.375H7.66665ZM7.58331 19C7.59394 19 7.60953 19.0029 7.62902 19.0231C7.64916 19.0441 7.66665 19.0781 7.66665 19.125H9.66665C9.66665 17.9873 8.76914 17 7.58331 17V19ZM5.41665 17C4.23082 17 3.33331 17.9873 3.33331 19.125H5.33331C5.33331 19.0781 5.3508 19.0441 5.37093 19.0231C5.39043 19.0029 5.40602 19 5.41665 19V17ZM12 4.5V5.625H14V4.5H12ZM19.5 19H21.6666V17H19.5V19ZM13 19H15.1666V17H13V19ZM12 18V22.5H14V18H12ZM12 10.125V13.5H14V10.125H12ZM17.3333 23.5H21.6666V21.5H17.3333V23.5ZM4.33331 14.5H8.66665V12.5H4.33331V14.5ZM13 14.5H13.0108V12.5H13V14.5ZM21.6666 14.5H21.6775V12.5H21.6666V14.5ZM13 14.5H17.3441V12.5H13V14.5Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/refresh/refresh.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 RefreshIcon = ({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="M4.33301 4.5V10.125H4.96298M21.5993 12.375C21.0662 7.9354 17.4193 4.5 12.9997 4.5C9.36251 4.5 6.24866 6.82669 4.96298 10.125M4.96298 10.125H9.74967M21.6663 22.5V16.875H21.0364M21.0364 16.875C19.7507 20.1733 16.6368 22.5 12.9997 22.5C8.58009 22.5 4.93317 19.0646 4.40006 14.625M21.0364 16.875H16.2497"
+      />
+    </Svg>
+  );
+};