@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/src/icons/crown.icon.d.ts

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

package/src/icons/crown.icon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Svg, {Defs, Image, Pattern, Rect, Use} from 'react-native-svg';
+
+export const CrownIcon = () => {
+  return (
+    <Svg width="32" height="28" viewBox="0 0 32 28" fill="none">
+      <Rect width="32" height="27.3231" fill="url(#pattern0)" />
+      <Defs>
+        <Pattern
+          id="pattern0"
+          patternContentUnits="objectBoundingBox"
+          width="1"
+          height="1"
+        >
+          <Use
+            xlinkHref="#image0_226_1363"
+            transform="scale(0.00769231 0.00900901)"
+          />
+        </Pattern>
+        <Image
+          id="image0_226_1363"
+          width="130"
+          height="111"
+          xlinkHref="data:image/png;base64,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"
+        />
+      </Defs>
+    </Svg>
+  );
+};

package/src/icons/icons.test.js

@@ -0,0 +1,328 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {Icon} from './index';
+
+describe('test icons', () => {
+  const greyColor = '#808080';
+  const whiteColor = '#ffffff';
+
+  it('render an outlined calendar icon in the main color', function () {
+    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 style={'regular'} name={'chat'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined chat-alt icon in a grey color and a size of 20px', () => {
+    const tree = render
+      .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 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 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 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 style={'regular'} name={'clock'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined cloud-download icon in a grey color with a size of 16px', () => {
+    const tree = render
+      .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 style={'regular'} name={'currency-euro'} color={'#FF0000'} />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a solid document-text icon in a white color', () => {
+    const tree = render
+      .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 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 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 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 style={'regular'} name={'filter'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined information-circle icon in the main color', () => {
+    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 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 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 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 style={'regular'} name={'menu'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined minus-sm icon in the main color', () => {
+    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 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 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 style={'regular'} name={'paper-clip'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined pencil icon in the main color', () => {
+    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 style={'regular'} name={'phone'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined plus icon in a grey color', () => {
+    const tree = render
+      .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 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 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 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 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 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 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 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 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 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 style={'regular'} name={'user'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an outlined user-group icon in a grey color', () => {
+    const tree = render
+      .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 style={'regular'} name={'users'} color={whiteColor} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  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 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 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 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 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 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 style={'solid'} name={'refresh'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a solid status-online icon in a navy color', () => {
+    const tree = render
+      .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 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

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

package/src/icons/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {IconInterface} from '../interfaces/icon.interface';
+import {Outline} from './outline/outline';
+import {Solid} from './solid/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

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

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

@@ -0,0 +1,24 @@
+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 CalendarIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        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

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

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

@@ -0,0 +1,24 @@
+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 ChatIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 23 21" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        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

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

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

@@ -0,0 +1,24 @@
+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 ChatAltIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 23 22" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        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

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

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

@@ -0,0 +1,24 @@
+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 CheckCircleIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 23 23" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        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

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

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

@@ -0,0 +1,24 @@
+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 ChevronLeftIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 10 19" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M8.875 17.375L1 9.5L8.875 1.625"
+      />
+    </Svg>
+  );
+};

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

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

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

@@ -0,0 +1,24 @@
+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 ChevronRightIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 11 19" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M1.75 1.625L9.33333 9.5L1.75 17.375"
+      />
+    </Svg>
+  );
+};

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

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

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

@@ -0,0 +1,24 @@
+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 ClockIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 23 22" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M11.5 6.66667V11L14.875 14.25M21.625 11C21.625 16.3848 17.0919 20.75 11.5 20.75C5.90812 20.75 1.375 16.3848 1.375 11C1.375 5.61522 5.90812 1.25 11.5 1.25C17.0919 1.25 21.625 5.61522 21.625 11Z"
+      />
+    </Svg>
+  );
+};

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

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

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

@@ -0,0 +1,24 @@
+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 CloudDownloadIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 23 25" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M5.875 17C3.38972 17 1.375 14.9853 1.375 12.5C1.375 10.3546 2.87639 8.5598 4.8858 8.10907C4.7969 7.71194 4.75 7.29895 4.75 6.875C4.75 3.7684 7.2684 1.25 10.375 1.25C13.0967 1.25 15.3669 3.18303 15.8877 5.7511C15.925 5.75037 15.9625 5.75 16 5.75C19.1066 5.75 21.625 8.2684 21.625 11.375C21.625 14.0963 19.6925 16.3663 17.125 16.8875M8.125 20.375L11.5 23.75M11.5 23.75L14.875 20.375M11.5 23.75V10.25"
+      />
+    </Svg>
+  );
+};

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

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