@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/src/icons/solid/qrcode/qrcode.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const QrcodeIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {Scale} from '../../../theme/scale/index';
+
+export const QrcodeIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 17" fill="none">
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.300049 1.60001C0.300049 0.964885 0.792536 0.450012 1.40005 0.450012H4.70005C5.30756 0.450012 5.80005 0.964885 5.80005 1.60001V5.05001C5.80005 5.68514 5.30756 6.20001 4.70005 6.20001H1.40005C0.792536 6.20001 0.300049 5.68514 0.300049 5.05001V1.60001ZM2.50005 3.90001V2.75001H3.60005V3.90001H2.50005Z"
+      />
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.300049 11.95C0.300049 11.3149 0.792536 10.8 1.40005 10.8H4.70005C5.30756 10.8 5.80005 11.3149 5.80005 11.95V15.4C5.80005 16.0351 5.30756 16.55 4.70005 16.55H1.40005C0.792536 16.55 0.300049 16.0351 0.300049 15.4V11.95ZM2.50005 14.25V13.1H3.60005V14.25H2.50005Z"
+      />
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.3 0.450012C10.6925 0.450012 10.2 0.964885 10.2 1.60001V5.05001C10.2 5.68514 10.6925 6.20001 11.3 6.20001H14.6C15.2076 6.20001 15.7 5.68514 15.7 5.05001V1.60001C15.7 0.964885 15.2076 0.450012 14.6 0.450012H11.3ZM12.4 2.75001V3.90001H13.5V2.75001H12.4Z"
+      />
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        d="M9.10005 1.60001C9.10005 0.964885 8.60756 0.450012 8.00005 0.450012C7.39254 0.450012 6.90005 0.964885 6.90005 1.60001V2.75001C6.90005 3.38514 7.39254 3.90001 8.00005 3.90001C8.60756 3.90001 9.10005 3.38514 9.10005 2.75001V1.60001Z"
+      />
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        d="M8.00005 5.05001C8.60756 5.05001 9.10005 5.56488 9.10005 6.20001V7.35001H11.3C11.9076 7.35001 12.4 7.86488 12.4 8.50001C12.4 9.13514 11.9076 9.65001 11.3 9.65001H8.00005C7.39254 9.65001 6.90005 9.13514 6.90005 8.50001V6.20001C6.90005 5.56488 7.39254 5.05001 8.00005 5.05001Z"
+      />
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        d="M14.6 7.35001C13.9925 7.35001 13.5 7.86488 13.5 8.50001C13.5 9.13514 13.9925 9.65001 14.6 9.65001C15.2076 9.65001 15.7 9.13514 15.7 8.50001C15.7 7.86488 15.2076 7.35001 14.6 7.35001Z"
+      />
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        d="M6.90005 11.95C6.90005 11.3149 7.39254 10.8 8.00005 10.8H9.10005C9.70756 10.8 10.2 11.3149 10.2 11.95C10.2 12.5851 9.70756 13.1 9.10005 13.1V15.4C9.10005 16.0351 8.60756 16.55 8.00005 16.55C7.39254 16.55 6.90005 16.0351 6.90005 15.4V11.95Z"
+      />
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        d="M4.70005 9.65001C5.30756 9.65001 5.80005 9.13514 5.80005 8.50001C5.80005 7.86488 5.30756 7.35001 4.70005 7.35001H1.40005C0.792536 7.35001 0.300049 7.86488 0.300049 8.50001C0.300049 9.13514 0.792536 9.65001 1.40005 9.65001H4.70005Z"
+      />
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        d="M15.7 11.95C15.7 12.5851 15.2076 13.1 14.6 13.1H12.4C11.7925 13.1 11.3 12.5851 11.3 11.95C11.3 11.3149 11.7925 10.8 12.4 10.8H14.6C15.2076 10.8 15.7 11.3149 15.7 11.95Z"
+      />
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        d="M14.6 16.55C15.2076 16.55 15.7 16.0351 15.7 15.4C15.7 14.7649 15.2076 14.25 14.6 14.25H11.3C10.6925 14.25 10.2 14.7649 10.2 15.4C10.2 16.0351 10.6925 16.55 11.3 16.55H14.6Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/refresh/refresh-solid.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const RefreshIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/solid/refresh/refresh-solid.icon.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const RefreshIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 18" fill="none">
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/search/search.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const SearchIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/solid/search/search.icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const SearchIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 19 19" fill="none">
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.20005 2.59999C4.65954 2.59999 2.60005 4.65948 2.60005 7.19999C2.60005 9.7405 4.65954 11.8 7.20005 11.8C9.74056 11.8 11.8 9.7405 11.8 7.19999C11.8 4.65948 9.74056 2.59999 7.20005 2.59999ZM0.300049 7.19999C0.300049 3.38922 3.38928 0.299988 7.20005 0.299988C11.0108 0.299988 14.1 3.38922 14.1 7.19999C14.1 8.69019 13.6276 10.0701 12.8244 11.198L18.3632 16.7368C18.8123 17.1859 18.8123 17.9141 18.3632 18.3632C17.9141 18.8123 17.186 18.8123 16.7369 18.3632L11.1981 12.8243C10.0701 13.6276 8.69025 14.1 7.20005 14.1C3.38928 14.1 0.300049 11.0108 0.300049 7.19999Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/selector/selector.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const SelectorIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/solid/selector/selector.icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const SelectorIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 10 16" fill="none">
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.99998 0.299988C5.29171 0.299988 5.5715 0.41588 5.77779 0.62217L9.07779 3.92217C9.50737 4.35175 9.50737 5.04823 9.07779 5.47781C8.64822 5.90738 7.95173 5.90738 7.52216 5.47781L4.99998 2.95562L2.47779 5.47781C2.04822 5.90738 1.35173 5.90738 0.922158 5.47781C0.492581 5.04823 0.492582 4.35175 0.922158 3.92217L4.22216 0.62217C4.42845 0.41588 4.70824 0.299988 4.99998 0.299988ZM0.922158 10.5222C1.35173 10.0926 2.04822 10.0926 2.47779 10.5222L4.99998 13.0444L7.52216 10.5222C7.95173 10.0926 8.64822 10.0926 9.07779 10.5222C9.50737 10.9517 9.50737 11.6482 9.07779 12.0778L5.77779 15.3778C5.34822 15.8074 4.65173 15.8074 4.22216 15.3778L0.922158 12.0778C0.492581 11.6482 0.492581 10.9517 0.922158 10.5222Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/share/share.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const ShareIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/solid/share/share.icon.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const ShareIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 22 22" fill="none">
+      <Path
+        d="M16.5 8.80001C18.3225 8.80001 19.7999 7.32255 19.7999 5.50001C19.7999 3.67747 18.3225 2.20001 16.5 2.20001C14.6774 2.20001 13.2 3.67747 13.2 5.50001C13.2 5.63804 13.2084 5.7741 13.2249 5.90768L7.7908 8.62472C7.19729 8.05217 6.38974 7.70001 5.49995 7.70001C3.67741 7.70001 2.19995 9.17747 2.19995 11C2.19995 12.8226 3.67741 14.3 5.49995 14.3C6.38976 14.3 7.19732 13.9478 7.79084 13.3753L13.2249 16.0923C13.2084 16.2259 13.2 16.362 13.2 16.5C13.2 18.3226 14.6774 19.8 16.5 19.8C18.3225 19.8 19.7999 18.3226 19.7999 16.5C19.7999 14.6775 18.3225 13.2 16.5 13.2C15.6102 13.2 14.8026 13.5522 14.2091 14.1247L8.77502 11.4077C8.79148 11.2741 8.79995 11.138 8.79995 11C8.79995 10.862 8.79147 10.7259 8.77501 10.5923L14.2091 7.87527C14.8026 8.44784 15.6101 8.80001 16.5 8.80001Z"
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/sm-view-grid-add/sm-view-grid-add.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const SmViewGridAddIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/solid/sm-view-grid-add/sm-view-grid-add.icon.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const SmViewGridAddIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        d="M2.50005 0.300049C1.28502 0.300049 0.300049 1.28502 0.300049 2.50005V4.70005C0.300049 5.91508 1.28502 6.90005 2.50005 6.90005H4.70005C5.91508 6.90005 6.90005 5.91508 6.90005 4.70005V2.50005C6.90005 1.28502 5.91508 0.300049 4.70005 0.300049H2.50005Z"
+      />
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        d="M2.50005 9.10005C1.28502 9.10005 0.300049 10.085 0.300049 11.3V13.5C0.300049 14.7151 1.28502 15.7 2.50005 15.7H4.70005C5.91508 15.7 6.90005 14.7151 6.90005 13.5V11.3C6.90005 10.085 5.91508 9.10005 4.70005 9.10005H2.50005Z"
+      />
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        d="M9.10005 2.50005C9.10005 1.28502 10.085 0.300049 11.3 0.300049H13.5C14.7151 0.300049 15.7 1.28502 15.7 2.50005V4.70005C15.7 5.91508 14.7151 6.90005 13.5 6.90005H11.3C10.085 6.90005 9.10005 5.91508 9.10005 4.70005V2.50005Z"
+      />
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        d="M12.4 9.10005C13.0076 9.10005 13.5 9.59254 13.5 10.2V11.3H14.6C15.2076 11.3 15.7 11.7925 15.7 12.4C15.7 13.0076 15.2076 13.5 14.6 13.5H13.5V14.6C13.5 15.2076 13.0076 15.7 12.4 15.7C11.7925 15.7 11.3 15.2076 11.3 14.6V13.5H10.2C9.59254 13.5 9.10005 13.0076 9.10005 12.4C9.10005 11.7925 9.59254 11.3 10.2 11.3H11.3V10.2C11.3 9.59254 11.7925 9.10005 12.4 9.10005Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/solid.d.ts

@@ -0,0 +1,2 @@
+import { IconNameInterface } from '../../interfaces/icon.interface';
+export declare const Solid: ({ name, size, color }: IconNameInterface) => JSX.Element;

package/src/icons/solid/solid.preview.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const IconSolidPreview: ({}: {}) => React.JSX.Element;

package/src/icons/solid/solid.preview.tsx

@@ -0,0 +1,146 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {Icon} from '..';
+import {ThemeCtx} from '../../context/theme.context';
+
+export const IconSolidPreview = ({}: {}) => {
+  const Context = useContext(ThemeCtx);
+  const greyColor = Context.colors.ui.darkgrey;
+  const whiteColor = Context.colors.ui.white;
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        padding: 20,
+        flexDirection: 'row',
+        alignContent: 'center',
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'space-around',
+          backgroundColor: Context.colors.main['0'],
+        }}
+      >
+        <Icon style={'solid'} name={'calendar'} color={whiteColor} size={16} />
+        <Icon style={'solid'} name={'chat'} color={whiteColor} size={16} />
+        <Icon style={'solid'} name={'chat-alt'} color={whiteColor} size={16} />
+        <Icon
+          style={'solid'}
+          name={'check-circle'}
+          color={whiteColor}
+          size={16}
+        />
+        <Icon
+          style={'solid'}
+          name={'chevron-left'}
+          color={whiteColor}
+          size={16}
+        />
+        <Icon
+          style={'solid'}
+          name={'chevron-right'}
+          color={whiteColor}
+          size={16}
+        />
+        <Icon style={'solid'} name={'clock'} color={whiteColor} size={16} />
+        <Icon
+          style={'solid'}
+          name={'cloud-download'}
+          color={whiteColor}
+          size={16}
+        />
+        <Icon
+          style={'solid'}
+          name={'currency-euro'}
+          color={whiteColor}
+          size={16}
+        />
+        <Icon
+          style={'solid'}
+          name={'document-text'}
+          color={whiteColor}
+          size={16}
+        />
+        <Icon
+          style={'solid'}
+          name={'exclamation'}
+          color={whiteColor}
+          size={16}
+        />
+        <Icon
+          style={'solid'}
+          name={'exclamation-circle'}
+          color={whiteColor}
+          size={16}
+        />
+        <Icon style={'solid'} name={'eye'} color={whiteColor} size={16} />
+        <Icon style={'solid'} name={'eye-off'} color={whiteColor} size={16} />
+        <Icon style={'solid'} name={'filter'} color={whiteColor} size={16} />
+        <Icon
+          style={'solid'}
+          name={'information-circle'}
+          color={whiteColor}
+          size={16}
+        />
+      </View>
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'space-around',
+          backgroundColor: Context.colors.ui.lightgrey,
+        }}
+      >
+        <Icon style={'solid'} name={'logout'} color={greyColor} size={22} />
+        <Icon style={'solid'} name={'mail'} color={greyColor} size={22} />
+        <Icon style={'solid'} name={'mail-open'} color={greyColor} size={22} />
+        <Icon style={'solid'} name={'menu'} color={greyColor} size={22} />
+        <Icon style={'solid'} name={'minus-sm'} color={greyColor} size={22} />
+        <Icon
+          style={'solid'}
+          name={'office-building'}
+          color={greyColor}
+          size={22}
+        />
+        <Icon
+          style={'solid'}
+          name={'paper-airplane'}
+          color={greyColor}
+          size={22}
+        />
+        <Icon style={'solid'} name={'paper-clip'} color={greyColor} size={22} />
+        <Icon style={'solid'} name={'pencil'} color={greyColor} size={22} />
+        <Icon style={'solid'} name={'phone'} color={greyColor} size={22} />
+        <Icon style={'solid'} name={'plus'} color={greyColor} size={22} />
+        <Icon style={'solid'} name={'plus-sm'} color={greyColor} size={22} />
+      </View>
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'space-around',
+          backgroundColor: Context.colors.main['9'],
+        }}
+      >
+        <Icon style={'solid'} name={'qrcode'} />
+        <Icon style={'solid'} name={'refresh'} />
+        <Icon style={'solid'} name={'search'} />
+        <Icon style={'solid'} name={'selector'} />
+        <Icon style={'solid'} name={'sm-view-grid-add'} />
+        <Icon style={'solid'} name={'status-online'} />
+        <Icon style={'solid'} name={'thumb-up'} />
+        <Icon style={'solid'} name={'trash'} />
+        <Icon style={'solid'} name={'user'} />
+        <Icon style={'solid'} name={'user-group'} />
+        <Icon style={'solid'} name={'users'} />
+        <Icon style={'solid'} name={'xmark'} />
+        <Icon style={'solid'} name={'share'} />
+        <Icon style={'solid'} name={'photograph'} />
+      </View>
+    </View>
+  );
+};

package/src/icons/solid/solid.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+
+import {IconNameInterface} from '../../interfaces/icon.interface';
+import {CalendarIcon as CalendarSolid} from './calendar/calendar.icon';
+import {ChatIcon as ChatSolid} from './chat/chat.icon';
+import {ChatAltIcon as ChatAltSolid} from './chat-alt/chat-alt-solid.icon';
+import {CheckCircleIcon as CheckCircleSolid} from './check-circle/check-circle.icon';
+import {ChevronLeftIcon as ChevronLeftSolid} from './chevron-left/chevron-left.icon';
+import {ChevronRightIcon as ChevronRightSolid} from './chevron-right/chevron-right.icon';
+import {ClockIcon as ClockSolid} from './clock/clock-solid.icon';
+import {CloudDownloadIcon as CloudDownloadSolid} from './cloud-download/cloud-download.icon';
+import {CurrencyEuroIcon as CurrencyEuroSolid} from './currency-euro/currency-euro.icon';
+import {DocumentTextIcon as DocumentTextSolid} from './document-text/document-text-solid.icon';
+import {ExclamationIcon as ExclamationSolid} from './exclamation/exclamation.icon';
+import {ExclamationCircleIcon as ExclamationCircleSolid} from './exclamation-circle/exclamation-circle.icon';
+import {EyeIcon as EyeSolid} from './eye/eye.icon';
+import {EyeOffIcon as EyeOffSolid} from './eye-off/eye-off.icon';
+import {FilterIcon as FilterSolid} from './filter/filter.icon';
+import {InformationCircleIcon as InformationCircleSolid} from './information-circle/information-circle-solid.icon';
+import {LogoutIcon as LogoutSolid} from './logout/logout.icon';
+import {MailIcon as MailSolid} from './mail/mail.icon';
+import {MailOpenIcon as MailOpenSolid} from './mail-open/mail-open.icon';
+import {MenuIcon as MenuSolid} from './menu/menu.icon';
+import {MinusSmallIcon as MinusSmallSolid} from './minus-sm/minus-sm.icon';
+import {OfficeBuildingIcon as OfficeBuildingSolid} from './office-building/office-building.icon';
+import {PaperAirplaneIcon as PaperAirplaneSolid} from './paper-airplane/paper-airplane.icon';
+import {PaperClipIcon as PaperClipSolid} from './paperclip/paperclip.icon';
+import {PencilIcon as PencilSolid} from './pencil/pencil-solid.icon';
+import {PhoneIcon as PhoneSolid} from './phone/phone-solid.icon';
+import {PlusIcon as PlusSolid} from './plus/plus.icon';
+import {PlusSmallIcon as PlusSmallSolid} from './plus-sm/plus-sm.icon';
+import {QrcodeIcon as QrcodeSolid} from './qrcode/qrcode.icon';
+import {RefreshIcon as RefreshSolid} from './refresh/refresh-solid.icon';
+import {SearchIcon as SearchSolid} from './search/search.icon';
+import {SelectorIcon as SelectorSolid} from './selector/selector.icon';
+import {SmViewGridAddIcon as SmViewGridAddSolid} from './sm-view-grid-add/sm-view-grid-add.icon';
+import {StatusOnlineIcon as StatusOnlineSolid} from './status-online/status-online-solid.icon';
+import {ThumbUpIcon as ThumbUpSolid} from './thumb-up/thumb-up.icon';
+import {TrashIcon as TrashSolid} from './trash/trash-solid.icon';
+import {UserIcon as UserSolid} from './user/user.icon';
+import {UserGroupIcon as UserGroupSolid} from './user-group/user-group.icon';
+import {UsersIcon as UsersSolid} from './users/users-solid.icon';
+import {XMarkIcon as XMarkSolid} from './xmark/xmark.icon';
+import {ShareIcon} from './share/share.icon';
+import {PhotographIcon} from './photograph/photograph-solid.icon';
+
+export const Solid = ({name, size, color}: IconNameInterface): JSX.Element => {
+  const renderIcon = ({name}: IconNameInterface): React.ReactNode => {
+    switch (name) {
+      case 'calendar':
+        return <CalendarSolid size={size} color={color} />;
+      case 'chat':
+        return <ChatSolid size={size} color={color} />;
+      case 'chat-alt':
+        return <ChatAltSolid size={size} color={color} />;
+      case 'check-circle':
+        return <CheckCircleSolid size={size} color={color} />;
+      case 'chevron-left':
+        return <ChevronLeftSolid size={size} color={color} />;
+      case 'chevron-right':
+        return <ChevronRightSolid size={size} color={color} />;
+      case 'clock':
+        return <ClockSolid size={size} color={color} />;
+      case 'cloud-download':
+        return <CloudDownloadSolid size={size} color={color} />;
+      case 'currency-euro':
+        return <CurrencyEuroSolid size={size} color={color} />;
+      case 'document-text':
+        return <DocumentTextSolid size={size} color={color} />;
+      case 'exclamation':
+        return <ExclamationSolid size={size} color={color} />;
+      case 'exclamation-circle':
+        return <ExclamationCircleSolid size={size} color={color} />;
+      case 'eye':
+        return <EyeSolid size={size} color={color} />;
+      case 'eye-off':
+        return <EyeOffSolid size={size} color={color} />;
+      case 'filter':
+        return <FilterSolid size={size} color={color} />;
+      case 'information-circle':
+        return <InformationCircleSolid size={size} color={color} />;
+      case 'logout':
+        return <LogoutSolid size={size} color={color} />;
+      case 'mail':
+        return <MailSolid size={size} color={color} />;
+      case 'mail-open':
+        return <MailOpenSolid size={size} color={color} />;
+      case 'menu':
+        return <MenuSolid size={size} color={color} />;
+      case 'minus-sm':
+        return <MinusSmallSolid size={size} color={color} />;
+      case 'office-building':
+        return <OfficeBuildingSolid size={size} color={color} />;
+      case 'paper-airplane':
+        return <PaperAirplaneSolid size={size} color={color} />;
+      case 'paper-clip':
+        return <PaperClipSolid size={size} color={color} />;
+      case 'pencil':
+        return <PencilSolid size={size} color={color} />;
+      case 'phone':
+        return <PhoneSolid size={size} color={color} />;
+      case 'plus':
+        return <PlusSolid size={size} color={color} />;
+      case 'plus-sm':
+        return <PlusSmallSolid size={size} color={color} />;
+      case 'qrcode':
+        return <QrcodeSolid size={size} color={color} />;
+      case 'refresh':
+        return <RefreshSolid size={size} color={color} />;
+      case 'search':
+        return <SearchSolid size={size} color={color} />;
+      case 'selector':
+        return <SelectorSolid size={size} color={color} />;
+      case 'sm-view-grid-add':
+        return <SmViewGridAddSolid size={size} color={color} />;
+      case 'status-online':
+        return <StatusOnlineSolid size={size} color={color} />;
+      case 'thumb-up':
+        return <ThumbUpSolid size={size} color={color} />;
+      case 'trash':
+        return <TrashSolid size={size} color={color} />;
+      case 'user':
+        return <UserSolid size={size} color={color} />;
+      case 'users':
+        return <UsersSolid size={size} color={color} />;
+      case 'user-group':
+        return <UserGroupSolid size={size} color={color} />;
+      case 'xmark':
+        return <XMarkSolid size={size} color={color} />;
+      case 'share':
+        return <ShareIcon size={size} color={color} />;
+      case 'photograph':
+        return <PhotographIcon size={size} color={color} />;
+      default:
+        alert('The icon you want is not available');
+        break;
+    }
+  };
+
+  return renderIcon({name}) as JSX.Element;
+};

package/src/icons/solid/status-online/status-online-solid.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const StatusOnlineIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/solid/status-online/status-online-solid.icon.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const StatusOnlineIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 17" fill="none">
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.55538 1.18119C4.98495 1.63029 4.98495 2.35843 4.55538 2.80753C1.54834 5.95125 1.54834 11.0482 4.55537 14.192C4.98495 14.6411 4.98495 15.3692 4.55537 15.8183C4.1258 16.2674 3.42932 16.2674 2.99974 15.8183C-0.86645 11.7764 -0.86645 5.22311 2.99974 1.18119C3.42932 0.732085 4.1258 0.732085 4.55538 1.18119ZM15.4448 1.18145C15.8744 0.732352 16.5709 0.732352 17.0005 1.18145C20.8667 5.22338 20.8667 11.7766 17.0005 15.8186C16.5709 16.2677 15.8744 16.2677 15.4448 15.8186C15.0153 15.3695 15.0153 14.6413 15.4448 14.1922C18.4519 11.0485 18.4519 5.95152 15.4448 2.8078C15.0153 2.3587 15.0153 1.63056 15.4448 1.18145ZM7.66665 4.43388C8.09623 4.88298 8.09623 5.61112 7.66665 6.06023C6.37792 7.40753 6.37792 9.59195 7.66665 10.9393C8.09623 11.3884 8.09623 12.1165 7.66665 12.5656C7.23707 13.0147 6.54059 13.0147 6.11102 12.5656C3.96313 10.3201 3.96313 6.67939 6.11102 4.43388C6.54059 3.98478 7.23708 3.98478 7.66665 4.43388ZM12.3336 4.43415C12.7631 3.98504 13.4596 3.98504 13.8892 4.43415C16.0371 6.67966 16.0371 10.3204 13.8892 12.5659C13.4596 13.015 12.7631 13.015 12.3336 12.5659C11.904 12.1168 11.904 11.3886 12.3336 10.9395C13.6223 9.59222 13.6223 7.4078 12.3336 6.06049C11.904 5.61139 11.904 4.88325 12.3336 4.43415ZM10.0001 7.35001C10.6076 7.35001 11.1001 7.86488 11.1001 8.50001V8.51151C11.1001 9.14664 10.6076 9.66151 10.0001 9.66151C9.39259 9.66151 8.9001 9.14664 8.9001 8.51151V8.50001C8.9001 7.86488 9.39259 7.35001 10.0001 7.35001Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/thumb-up/thumb-up.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const ThumbUpIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/solid/thumb-up/thumb-up.icon.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const ThumbUpIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        d="M0.199951 9.54995C0.199951 8.63868 0.938681 7.89995 1.84995 7.89995C2.76122 7.89995 3.49995 8.63868 3.49995 9.54995V16.15C3.49995 17.0612 2.76122 17.7999 1.84995 17.7999C0.938681 17.7999 0.199951 17.0612 0.199951 16.15V9.54995Z"
+      />
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        d="M4.59995 9.36662V15.3403C4.59995 16.1736 5.07076 16.9354 5.81608 17.308L5.87091 17.3354C6.48187 17.6409 7.15557 17.7999 7.83865 17.7999H13.7964C14.8451 17.7999 15.748 17.0597 15.9537 16.0314L17.2737 9.43141C17.5459 8.07007 16.5047 6.79995 15.1164 6.79995H11.2V2.39995C11.2 1.18492 10.215 0.199951 8.99995 0.199951C8.39244 0.199951 7.89995 0.692438 7.89995 1.29995V2.03328C7.89995 2.98531 7.59117 3.91166 7.01995 4.67328L5.47995 6.72662C4.90873 7.48824 4.59995 8.41459 4.59995 9.36662Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/trash/trash-solid.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const TrashIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/solid/trash/trash-solid.icon.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const TrashIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 17 18" fill="none">
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/user/user.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const UserIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/solid/user/user.icon.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const UserIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 17 18" fill="none">
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        d="M8.49995 7.35001C10.4053 7.35001 11.95 5.80539 11.95 3.90001C11.95 1.99463 10.4053 0.450012 8.49995 0.450012C6.59457 0.450012 5.04995 1.99463 5.04995 3.90001C5.04995 5.80539 6.59457 7.35001 8.49995 7.35001Z"
+      />
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        d="M0.449951 17.7C0.449951 13.2541 4.05406 9.65001 8.49995 9.65001C12.9458 9.65001 16.55 13.2541 16.55 17.7H0.449951Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/user-group/user-group.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const UserGroupIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;