react-native-exp-fig 0.1.0

package/src/common/icons-svg/check-circle/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+import { ISvgProps } from "../interface";
+
+const SvgIconCheckCircle: React.FC<ISvgProps> = ({ color, width, height }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={width ?? 26}
+    height={height ?? 26}
+    fill="none"
+  >
+    <Path
+      fill={color ?? "#25BA76"}
+      d="M13 0a13 13 0 1 0 13 13A13.013 13.013 0 0 0 13 0Zm5.707 10.707-7 7a1.001 1.001 0 0 1-1.415 0l-3-3a1 1 0 1 1 1.416-1.415L11 15.587l6.293-6.293a1 1 0 1 1 1.415 1.415Z"
+    />
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconCheckCircle };

package/src/common/icons-svg/closed/index.tsx

@@ -0,0 +1,34 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import Svg, { Path, G, Defs, ClipPath } from "react-native-svg";
+/**
+ * typings
+ */
+import { ISvgProps } from "../interface";
+
+const SvgIconClosed: React.FC<ISvgProps> = ({ color }) => (
+  // @ts-expect-error
+  <Svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none">
+    <G
+      stroke={color ?? "#1e1e1e"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      clipPath="url(#a)"
+    >
+      <Path d="M17.562 4.813 4.917 17.188M17.562 17.188 4.917 4.813" />
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill="#1e1e1e" d="M0 0h22.48v22H0z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconClosed };

package/src/common/icons-svg/constants/index.ts

@@ -0,0 +1,43 @@
+/**
+ * IMPORTS
+ */
+
+const SVG_NAME = {
+  CAMERA_PLUS: "camera-plus",
+  STEERING_WHEEL: "steering-wheel",
+  CHECK_BOX_FILL: "check-box-fill",
+  CHECK_BOX_OUTLINE: "check-box-outline",
+  MOON_STARS: "moon-stars",
+  CALL_BELL: "call-bell",
+  STEERING_WHEEL_FILL: "steering-wheel-fill",
+  TROPHY: "trophy",
+  SHOPPING_CART: "Pedido Realizado",
+  CREDIT_CARD: "Pagamento Aprovado",
+  FILE_TEXT: "Pedido Faturado",
+  TRUCK: "Pedido Enviado",
+  PACKAGE_CHECK: "Pedido Entregue",
+  EYE_SLASH: "eye-slash",
+  EYE: "eye",
+  CALENDAR: "calendar",
+  TIMER: "timer",
+  GEAR: "gear",
+  CURRENCY: "currency",
+  GAUGE: "gauge",
+  GAS_PUMP: "gas-pump",
+  ARROW_LEFT: "arrow-left",
+  BLUETOOTH: "bluetooth",
+  BLUETOOTH_CONNECTED: "bluetooth-connected",
+  LIST: "list",
+  WIFI_X: "wifi-x",
+  WIFI_HIGH: "wifi-high",
+  NOTE_PINCEL: "note-pincel",
+  CHECK_CIRCLE: "check-circle",
+  ARROW_DROP_DOWN: "arrow-drop-down",
+  CLOSED: "closed",
+};
+
+/**
+ * EXPORTS
+ */
+
+export { SVG_NAME };

package/src/common/icons-svg/credit-card/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+/**
+ * typings
+ */
+import { ISvgProps } from "../interface";
+
+const IconCreditCard: React.FC<ISvgProps> = ({ size, color }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? "24"}
+    height={size ?? "24"}
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M20 5H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V7a2 2 0 00-2-2zM2 10h20"
+    ></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { IconCreditCard };

package/src/common/icons-svg/currency/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, G, Defs, ClipPath } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconCurrency: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 18}
+    height={size ?? 18}
+    fill="none"
+    viewBox="0 0 18 18"
+  >
+    <G
+      stroke={color ?? "#393939"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      clipPath="url(#clip0_689_608)"
+    >
+      <Path d="M9 1.688v14.624M12.938 6.188a2.811 2.811 0 00-2.813-2.813h-2.25a2.813 2.813 0 000 5.625h2.813a2.812 2.812 0 110 5.625H7.312A2.812 2.812 0 014.5 11.812"></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_689_608">
+        <Path fill="#fff" d="M0 0H18V18H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconCurrency };

package/src/common/icons-svg/eye/index.tsx

@@ -0,0 +1,31 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, G } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconEye: React.FC<ISvgProps> = ({ color, size, ...res }) => (
+  <Svg
+    // @ts-expect-error
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 26}
+    height={size ?? 26}
+    fill="none"
+    {...res}
+  >
+    <G filter="url(#a)">
+      <Path
+        fill={color ?? "#050022"}
+        d="M23.185 12.196c-.032-.074-.827-1.835-2.592-3.6C18.241 6.242 15.27 5 12 5 8.73 5 5.76 6.243 3.407 8.595 1.642 10.361.844 12.125.815 12.196a.75.75 0 0 0 0 .61c.032.074.827 1.834 2.592 3.6C5.759 18.756 8.73 20 12 20c3.27 0 6.24-1.243 8.593-3.594 1.765-1.766 2.56-3.526 2.592-3.6a.75.75 0 0 0 0-.61ZM12 18.5c-2.886 0-5.407-1.05-7.493-3.117A12.511 12.511 0 0 1 2.344 12.5a12.499 12.499 0 0 1 2.163-2.883C6.593 7.55 9.114 6.5 12 6.5s5.407 1.05 7.493 3.117a12.507 12.507 0 0 1 2.168 2.883c-.676 1.262-3.62 6-9.661 6ZM12 8a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Zm0 7.5a3 3 0 1 1 0-5.999 3 3 0 0 1 0 5.999Z"
+      />
+    </G>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconEye };

package/src/common/icons-svg/eye-slash/index.tsx

@@ -0,0 +1,31 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconEyeSlash: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    // @ts-expect-error
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+  >
+    <G filter="url(#a)">
+      <Path
+        fill={color ?? "#050022"}
+        d="M9.055 3.746a.75.75 0 1 0-1.11 1.008L9.749 6.74c-3.405 2.09-4.87 5.311-4.934 5.457a.75.75 0 0 0 0 .61c.032.074.827 1.834 2.592 3.6C9.759 18.756 12.73 20 16 20c1.68.01 3.344-.336 4.882-1.015l2.062 2.27a.75.75 0 1 0 1.11-1.01L9.055 3.746Zm4.437 7.11 3.907 4.298a3 3 0 0 1-3.907-4.298ZM16 18.5c-2.886 0-5.407-1.05-7.493-3.117A12.484 12.484 0 0 1 6.344 12.5c.44-.824 1.843-3.13 4.439-4.63l1.687 1.852a4.5 4.5 0 0 0 5.968 6.563l1.381 1.518A10.501 10.501 0 0 1 16 18.5Zm.563-8.947a.75.75 0 0 1 .28-1.473 4.515 4.515 0 0 1 3.635 3.997.75.75 0 0 1-.676.817.636.636 0 0 1-.07 0 .75.75 0 0 1-.75-.68 3.008 3.008 0 0 0-2.42-2.66Zm10.62 3.253c-.04.088-.99 2.19-3.128 4.106a.752.752 0 0 1-1.068-.05.75.75 0 0 1 .068-1.068A12.448 12.448 0 0 0 25.66 12.5a12.482 12.482 0 0 0-2.168-2.885C21.407 7.55 18.886 6.5 16 6.5c-.608 0-1.215.048-1.815.147a.75.75 0 1 1-.248-1.48A12.562 12.562 0 0 1 16 5c3.27 0 6.24 1.243 8.593 3.595 1.765 1.766 2.56 3.527 2.592 3.601a.75.75 0 0 1 0 .61h-.002Z"
+      />
+    </G>
+    <Defs></Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconEyeSlash };

package/src/common/icons-svg/file-text/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+/**
+ * typings
+ */
+import { ISvgProps } from "../interface";
+
+const IconFileText: React.FC<ISvgProps> = ({ color, size, ...res }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? "24"}
+    height={size ?? "24"}
+    fill="none"
+    viewBox="0 0 24 24"
+    {...res}
+  >
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z"
+    ></Path>
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M14 2v6h6M16 13H8M16 17H8M10 9H8"
+    ></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { IconFileText };

package/src/common/icons-svg/gas-pump/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { G, Path, Defs, ClipPath } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconGasPump: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 25 25"
+  >
+    <G
+      stroke={color ?? "#050022"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      clipPath="url(#clip0_645_111)"
+    >
+      <Path d="M5.75 20.75v-15a1.5 1.5 0 011.5-1.5h7.5a1.5 1.5 0 011.5 1.5v15M3.5 20.75h15M16.25 11h2.25a1.5 1.5 0 011.5 1.5v3.75a1.5 1.5 0 103 0V8.622a1.501 1.501 0 00-.44-1.062l-1.81-1.81M13.25 11h-4.5"></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_645_111">
+        <Path fill="#fff" d="M0 0H24V24H0z" transform="translate(.5 .5)"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconGasPump };

package/src/common/icons-svg/gauge/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { G, Path, Defs, ClipPath } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconGauge: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <G
+      stroke={color ?? "#050022"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      clipPath="url(#clip0_644_104)"
+    >
+      <Path d="M2.25 17.25v-2.144c0-5.389 4.327-9.837 9.715-9.856A9.75 9.75 0 0121.75 15v2.25A.75.75 0 0121 18H3a.75.75 0 01-.75-.75zM12 5.25v3M9.75 18l6-8.25M18.75 13.5h2.886M2.38 13.5h2.87"></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_644_104">
+        <Path fill="#fff" d="M0 0H24V24H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconGauge };

package/src/common/icons-svg/gear/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconGear: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+  >
+    <G
+      stroke={color ?? "#050022"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      clipPath="url(#a)"
+    >
+      <Path d="M12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z" />
+      <Path d="M3.884 16.696a9.295 9.295 0 0 1-.944-2.277l1.573-1.97a7.645 7.645 0 0 1 0-.903L2.941 9.577A9.321 9.321 0 0 1 3.883 7.3l2.504-.28c.2-.226.413-.44.639-.64l.28-2.502a9.294 9.294 0 0 1 2.275-.937l1.969 1.573c.3-.018.603-.018.904 0l1.968-1.572a9.32 9.32 0 0 1 2.279.942l.28 2.504c.226.2.44.413.64.639l2.502.28c.415.715.732 1.48.944 2.278l-1.573 1.969c.018.3.018.602 0 .903l1.573 1.97a9.321 9.321 0 0 1-.938 2.277l-2.504.282c-.2.225-.413.438-.639.638l-.28 2.503a9.296 9.296 0 0 1-2.278.944l-1.969-1.573a7.653 7.653 0 0 1-.903 0l-1.97 1.572a9.32 9.32 0 0 1-2.277-.937l-.282-2.504a7.6 7.6 0 0 1-.638-.639l-2.505-.293Z" />
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill="#fff" d="M0 0h24v24H0z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconGear };

package/src/common/icons-svg/index.tsx

@@ -0,0 +1,149 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+
+// commons / svg
+import { SvgIconSteeringWheel } from "./steering-wheel";
+import { SvgIconCheckBoxFill } from "./check-box-fill";
+import { SvgIconCheckBoxOutline } from "./check-box-outline";
+import { SvgIconCameraPlus } from "./camera-plus";
+import { SvgIconMoonStars } from "./moon-stars";
+import { SvgIconCallBell } from "./call-bell";
+import { SvgIconSteeringWheelFill } from "./steering-wheel-fill";
+import { SvgIconTrophy } from "./trophy";
+import { IconShoppingCart } from "./shopping-cart";
+import { IconCreditCard } from "./credit-card";
+import { IconFileText } from "./file-text";
+import { IconTruck } from "./truck";
+import { IconPackageCheck } from "./package-check";
+import { SvgIconEyeSlash } from "./eye-slash";
+import { SvgIconCalendar } from "./calendar";
+import { SvgIconCurrency } from "./currency";
+import { SvgIconEye } from "./eye";
+import { SvgIconGasPump } from "./gas-pump";
+import { SvgIconGauge } from "./gauge";
+import { SvgIconGear } from "./gear";
+import { SvgIconTimer } from "./timer";
+import { SvgIconNotePencil } from "./note-pincel";
+import { SvgIconCheckCircle } from "./check-circle";
+import { SvgIconArrowLeft } from "./arrow-left";
+import { SvgIconBluetooth } from "./bluetooth";
+import { SvgIconBluetoothConnected } from "./bluetooth-connected";
+import { SvgIconList } from "./list";
+import { SvgIconWiFiHigh } from "./wifi-high";
+import { SvgIconWiFiX } from "./wifi-x";
+import { SvgIconArrowDropDown } from "./arrow-drop-down";
+import { SvgIconClosed } from "./closed";
+
+// typing
+import { ISvgProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const Icons: React.FC<ISvgProps> = ({ icon, color, size }) => {
+  switch (icon) {
+    case "STEERING_WHEEL":
+      return <SvgIconSteeringWheel icon="STEERING_WHEEL" color={color} size={size} />;
+
+    case "CHECK_BOX_FILL":
+      return <SvgIconCheckBoxFill icon="CHECK_BOX_FILL" color={color} size={size} />;
+
+    case "CHECK_BOX_OUTLINE":
+      return <SvgIconCheckBoxOutline icon="CHECK_BOX_OUTLINE" color={color} size={size} />;
+
+    case "CAMERA_PLUS":
+      return <SvgIconCameraPlus color={color} size={size} icon={"CAMERA_PLUS"} />;
+
+    case "MOON_STARS":
+      return <SvgIconMoonStars color={color} size={size} icon={"MOON_STARS"} />;
+
+    case "CALL_BELL":
+      return <SvgIconCallBell color={color} size={size} icon={"CALL_BELL"} />;
+
+    case "STEERING_WHEEL_FILL":
+      return <SvgIconSteeringWheelFill color={color} size={size} icon={"STEERING_WHEEL_FILL"} />;
+
+    case "TROPHY":
+      return <SvgIconTrophy color={theme.colors.orange[150]} size={size} icon={"TROPHY"} />;
+
+    case "SHOPPING_CART":
+      return <IconShoppingCart icon={"SHOPPING_CART"} />;
+
+    case "CREDIT_CARD":
+      return <IconCreditCard icon={"CREDIT_CARD"} />;
+
+    case "FILE_TEXT":
+      return <IconFileText icon={"FILE_TEXT"} />;
+
+    case "TRUCK":
+      return <IconTruck icon={"TRUCK"} />;
+
+    case "PACKAGE_CHECK":
+      return <IconPackageCheck icon={"PACKAGE_CHECK"} />;
+
+    case "EYE_SLASH":
+      return <SvgIconEyeSlash color={color} size={size} icon={"EYE_SLASH"} />;
+
+    case "EYE":
+      return <SvgIconEye color={color} size={size} icon={"EYE"} />;
+
+    case "CALENDAR":
+      return <SvgIconCalendar color={color} size={size} icon={"CALENDAR"} />;
+
+    case "TIMER":
+      return <SvgIconTimer color={color} size={size} icon={"TIMER"} />;
+
+    case "GEAR":
+      return <SvgIconGear color={color} size={size} icon={"GEAR"} />;
+
+    case "CURRENCY":
+      return <SvgIconCurrency color={color} size={size} icon={"CURRENCY"} />;
+
+    case "GAUGE":
+      return <SvgIconGauge color={color} size={size} icon={"GAUGE"} />;
+
+    case "GAS_PUMP":
+      return <SvgIconGasPump color={color} size={size} icon={"GAS_PUMP"} />;
+
+    case "ARROW_LEFT":
+      return <SvgIconArrowLeft color={color} size={size} icon={"ARROW_LEFT"} />;
+
+    case "BLUETOOTH":
+      return <SvgIconBluetooth color={color} size={size} icon={"BLUETOOTH"} />;
+
+    case "BLUETOOTH_CONNECTED":
+      return <SvgIconBluetoothConnected color={color} size={size} icon={"BLUETOOTH_CONNECTED"} />;
+
+    case "LIST":
+      return <SvgIconList color={color} size={size} icon={"LIST"} />;
+
+    case "WIFI_HIGH":
+      return <SvgIconWiFiHigh color={color} size={size} icon={"WIFI_HIGH"} />;
+
+    case "WIFI_X":
+      return <SvgIconWiFiX color={color} size={size} icon={"WIFI_X"} />;
+
+    case "NOTE_PINCEL":
+      return <SvgIconNotePencil color={color} size={size} icon={"NOTE_PINCEL"} />;
+
+    case "CHECK_CIRCLE":
+      return <SvgIconCheckCircle color={color} size={size} icon={"CHECK_CIRCLE"} />;
+
+    case "ARROW_DROP_DOWN":
+      return <SvgIconArrowDropDown color={color} size={size} icon={"ARROW_DROP_DOWN"} />;
+
+    case "CLOSED":
+      return <SvgIconClosed color={color} size={size} icon={"CLOSED"} />;
+
+    default:
+      return <SvgIconCameraPlus color={color} size={size} icon={"CAMERA_PLUS"} />;
+  }
+};
+
+/**
+ * EXPORTS
+ */
+
+export { Icons };

package/src/common/icons-svg/interface.d.ts

@@ -0,0 +1,18 @@
+/**
+ * IMPORTS
+ */
+
+import { SvgProps } from "react-native-svg";
+import { SVG_NAME } from "./constants";
+
+interface ISvgProps extends SvgProps {
+  width?: number;
+  height?: number;
+  color?: string;
+  size?: number;
+  icon: keyof typeof SVG_NAME;
+}
+/**
+ * EXPORTS
+ */
+export { ISvgProps };

package/src/common/icons-svg/list/index.tsx

@@ -0,0 +1,58 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, G, Defs, Rect, ClipPath } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconList: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    width={size ?? 28}
+    height={size ?? 28}
+    viewBox="0 0 28 28"
+    fill={"none"}
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <G clip-path="url(#clip0_627_88)">
+      <Path
+        d="M5.43347 16.557H27.4335"
+        stroke={color ?? "#fff"}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <Path
+        d="M5.43347 8.55701H27.4335"
+        stroke={color ?? "#fff"}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <Path
+        d="M5.43347 24.557H27.4335"
+        stroke={color ?? "#fff"}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="clip0_627_88">
+        <Rect
+          width={size ?? 28}
+          height={size ?? 28}
+          fill="white"
+          transform="translate(0.433472 0.557007)"
+        />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconList };

package/src/common/icons-svg/moon-stars/index.tsx

@@ -0,0 +1,29 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconMoonStars: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <Path
+      fill={color ?? "#050022"}
+      d="M22.5 9a.75.75 0 0 1-.75.75h-1.5v1.5a.75.75 0 1 1-1.5 0v-1.5h-1.5a.75.75 0 1 1 0-1.5h1.5v-1.5a.75.75 0 1 1 1.5 0v1.5h1.5a.75.75 0 0 1 .75.75m-9-3.75h.75V6a.75.75 0 1 0 1.5 0v-.75h.75a.75.75 0 1 0 0-1.5h-.75V3a.75.75 0 1 0-1.5 0v.75h-.75a.75.75 0 1 0 0 1.5m6.822 9.094a.75.75 0 0 1 .134.75 9.001 9.001 0 0 1-17.09-.578A9 9 0 0 1 8.914 3.544a.75.75 0 0 1 .994.85 8.256 8.256 0 0 0 9.7 9.7.75.75 0 0 1 .715.25m-1.818 1.395q-.251.012-.504.013A9.76 9.76 0 0 1 8.25 6c0-.168 0-.337.013-.504a7.5 7.5 0 1 0 10.241 10.24z"
+    ></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconMoonStars };