react-native-exp-fig 0.1.16 → 0.1.17

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

@@ -1,259 +1,259 @@
-/**
- * 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";
-import { SvgPackage } from "./package";
-import { SvgChartBar } from "./chart-bar";
-import { SvgTruckTrailer } from "./truck-trailer";
-import { SvgIconBell } from "./bell";
-import { SvgIconFiles } from "./files";
-import { SvgIconLifebuoy } from "./lifebuoy";
-import { SvgIconRecused } from "./recused";
-import { SvgIconExclamationCircle } from "./exclamation-circle";
-import { SvgIconPlus } from "./plus";
-import { SvgIconXCirle } from "./x-circle";
-import { SvgIconEllipse } from "./ellipse";
-import { SvgIconCheckBox } from "./check-box";
-import { SvgIconPencil } from "./pencil";
-import { SvgIconCar } from "./car";
-import { SvgIconTruckActivity } from "./truck-activity";
-import { SvgIconCheckOutline } from "./check-outline";
-import { SvgIconCoffee } from "./coffee";
-import { SvgIconAgent } from "./agent";
-import { SvgIconBed } from "./bed";
-import { SvgIconRefreshCcwDot } from "./refresh-ccw-dot";
-import { SvgIconHourglass } from "./hourglass";
-
-// typing
-import { ISvgProps } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-const Icons: React.FC<ISvgProps> = ({ icon, color, size, background }) => {
-  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_OUTLINE":
-      return <SvgIconCheckOutline icon="CHECK_OUTLINE" color={color} size={size} />;
-
-    case "CHECK_BOX_OUTLINE":
-      return <SvgIconCheckBoxOutline icon="CHECK_BOX_OUTLINE" color={color} size={size} />;
-
-    case "CHECK_BOX":
-      return <SvgIconCheckBox icon="CHECK_BOX" color={color} size={size} background={background} />;
-
-    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 "BED":
-      return <SvgIconBed color={color} size={size} icon={"BED"} />;
-
-    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"}
-          background={background}
-        />
-      );
-
-    case "ARROW_DROP_DOWN":
-      return <SvgIconArrowDropDown color={color} size={size} icon={"ARROW_DROP_DOWN"} />;
-
-    case "CLOSED":
-      return <SvgIconClosed color={color} size={size} icon={"CLOSED"} />;
-
-    case "BELL":
-      return <SvgIconBell color={color} size={size} icon={"BELL"} />;
-
-    case "FILES":
-      return <SvgIconFiles color={color} size={size} icon={"FILES"} />;
-
-    case "LIFEBUOY":
-      return <SvgIconLifebuoy color={color} size={size} icon={"LIFEBUOY"} />;
-
-    case "RECUSED":
-      return <SvgIconRecused color={color} size={size} icon={"RECUSED"} background={background} />;
-
-    case "EXCLAMATION_CIRCLE":
-      return (
-        <SvgIconExclamationCircle
-          color={color}
-          size={size}
-          icon={"EXCLAMATION_CIRCLE"}
-          background={background}
-        />
-      );
-
-    case "PLUS":
-      return <SvgIconPlus color={color} size={size} icon={"PLUS"} />;
-
-    case "X_CIRCLE":
-      return <SvgIconXCirle color={color} size={size} icon={"X_CIRCLE"} />;
-
-    case "ELLIPSE":
-      return <SvgIconEllipse color={color} size={size} icon={"ELLIPSE"} />;
-
-    case "PENCIL":
-      return <SvgIconPencil color={color} size={size} icon={"PENCIL"} />;
-    case "CAR":
-      return <SvgIconCar color={color} size={size} icon={"CAR"} />;
-
-    case "TRUCK_ACTIVITY":
-      return (
-        <SvgIconTruckActivity
-          color={color}
-          size={size}
-          background={background}
-          icon={"TRUCK_ACTIVITY"}
-        />
-      );
-
-    case "COFFEE":
-      return <SvgIconCoffee color={color} size={size} icon={"COFFEE"} />;
-
-    case "AGENT":
-      return <SvgIconAgent color={color} size={size} icon={"AGENT"} />;
-
-    case "REFRESH_CCW_DOT":
-      return <SvgIconRefreshCcwDot color={color} size={size} icon={"REFRESH_CCW_DOT"} />;
-
-    case "HOURGLASS":
-      return <SvgIconHourglass color={color} size={size} icon={"HOURGLASS"} />;
-
-    default:
-      return <SvgIconCameraPlus color={color} size={size} icon={"CAMERA_PLUS"} />;
-  }
-};
-
-const IconsMenuItems: React.FC<ISvgProps> = ({ icon, color, size }) => {
-  switch (icon) {
-    case "COIL":
-      return <SvgPackage color={color} size={size} icon={"COIL"} />;
-    case "LOADING":
-      return <SvgTruckTrailer color={color} size={size} icon={"LOADING"} />;
-
-    case "HISTORY":
-      return <SvgChartBar color={color} size={size} icon={"HISTORY"} />;
-
-    default:
-      return <SvgPackage color={color} size={size} icon={"COIL"} />;
-  }
-};
-
-/**
- * EXPORTS
- */
-
-export { Icons, IconsMenuItems };
+/**
+ * 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";
+import { SvgPackage } from "./package";
+import { SvgChartBar } from "./chart-bar";
+import { SvgTruckTrailer } from "./truck-trailer";
+import { SvgIconBell } from "./bell";
+import { SvgIconFiles } from "./files";
+import { SvgIconLifebuoy } from "./lifebuoy";
+import { SvgIconRecused } from "./recused";
+import { SvgIconExclamationCircle } from "./exclamation-circle";
+import { SvgIconPlus } from "./plus";
+import { SvgIconXCirle } from "./x-circle";
+import { SvgIconEllipse } from "./ellipse";
+import { SvgIconCheckBox } from "./check-box";
+import { SvgIconPencil } from "./pencil";
+import { SvgIconCar } from "./car";
+import { SvgIconTruckActivity } from "./truck-activity";
+import { SvgIconCheckOutline } from "./check-outline";
+import { SvgIconCoffee } from "./coffee";
+import { SvgIconAgent } from "./agent";
+import { SvgIconBed } from "./bed";
+import { SvgIconRefreshCcwDot } from "./refresh-ccw-dot";
+import { SvgIconHourglass } from "./hourglass";
+
+// typing
+import { ISvgProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const Icons: React.FC<ISvgProps> = ({ icon, color, size, background }) => {
+  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_OUTLINE":
+      return <SvgIconCheckOutline icon="CHECK_OUTLINE" color={color} size={size} />;
+
+    case "CHECK_BOX_OUTLINE":
+      return <SvgIconCheckBoxOutline icon="CHECK_BOX_OUTLINE" color={color} size={size} />;
+
+    case "CHECK_BOX":
+      return <SvgIconCheckBox icon="CHECK_BOX" color={color} size={size} background={background} />;
+
+    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 "BED":
+      return <SvgIconBed color={color} size={size} icon={"BED"} />;
+
+    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"}
+          background={background}
+        />
+      );
+
+    case "ARROW_DROP_DOWN":
+      return <SvgIconArrowDropDown color={color} size={size} icon={"ARROW_DROP_DOWN"} />;
+
+    case "CLOSED":
+      return <SvgIconClosed color={color} size={size} icon={"CLOSED"} />;
+
+    case "BELL":
+      return <SvgIconBell color={color} size={size} icon={"BELL"} />;
+
+    case "FILES":
+      return <SvgIconFiles color={color} size={size} icon={"FILES"} />;
+
+    case "LIFEBUOY":
+      return <SvgIconLifebuoy color={color} size={size} icon={"LIFEBUOY"} />;
+
+    case "RECUSED":
+      return <SvgIconRecused color={color} size={size} icon={"RECUSED"} background={background} />;
+
+    case "EXCLAMATION_CIRCLE":
+      return (
+        <SvgIconExclamationCircle
+          color={color}
+          size={size}
+          icon={"EXCLAMATION_CIRCLE"}
+          background={background}
+        />
+      );
+
+    case "PLUS":
+      return <SvgIconPlus color={color} size={size} icon={"PLUS"} />;
+
+    case "X_CIRCLE":
+      return <SvgIconXCirle color={color} size={size} icon={"X_CIRCLE"} />;
+
+    case "ELLIPSE":
+      return <SvgIconEllipse color={color} size={size} icon={"ELLIPSE"} />;
+
+    case "PENCIL":
+      return <SvgIconPencil color={color} size={size} icon={"PENCIL"} />;
+    case "CAR":
+      return <SvgIconCar color={color} size={size} icon={"CAR"} />;
+
+    case "TRUCK_ACTIVITY":
+      return (
+        <SvgIconTruckActivity
+          color={color}
+          size={size}
+          background={background}
+          icon={"TRUCK_ACTIVITY"}
+        />
+      );
+
+    case "COFFEE":
+      return <SvgIconCoffee color={color} size={size} icon={"COFFEE"} />;
+
+    case "AGENT":
+      return <SvgIconAgent color={color} size={size} icon={"AGENT"} />;
+
+    case "REFRESH_CCW_DOT":
+      return <SvgIconRefreshCcwDot color={color} size={size} icon={"REFRESH_CCW_DOT"} />;
+
+    case "HOURGLASS":
+      return <SvgIconHourglass color={color} size={size} icon={"HOURGLASS"} />;
+
+    default:
+      return <SvgIconCameraPlus color={color} size={size} icon={"CAMERA_PLUS"} />;
+  }
+};
+
+const IconsMenuItems: React.FC<ISvgProps> = ({ icon, color, size }) => {
+  switch (icon) {
+    case "COIL":
+      return <SvgPackage color={color} size={size} icon={"COIL"} />;
+    case "LOADING":
+      return <SvgTruckTrailer color={color} size={size} icon={"LOADING"} />;
+
+    case "HISTORY":
+      return <SvgChartBar color={color} size={size} icon={"HISTORY"} />;
+
+    default:
+      return <SvgPackage color={color} size={size} icon={"COIL"} />;
+  }
+};
+
+/**
+ * EXPORTS
+ */
+
+export { Icons, IconsMenuItems };

package/src/common/icons-svg/modal-activities/SvgIconCallBell.tsx

@@ -0,0 +1,37 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+import { ISvgProps } from "../interface";
+
+const SvgIconCallBell: React.FC<Omit<ISvgProps, "icon">> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox={`0 0 ${size ?? 24} ${size ?? 24}`}
+  >
+    <G
+      stroke={color ?? "#050022"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      clipPath="url(#clip0_906_106)"
+    >
+      <Path d="M2.609 17.017h19.5M2.609 20.017h19.5M12.359 6.517v-3M10.109 3.517h4.5M4.109 17.017v-2.25a8.25 8.25 0 0116.5 0v2.25" />
+    </G>
+    <Defs>
+      <ClipPath id="clip0_906_106">
+        <Path fill={color ?? "#fff"} d="M0 0H24V24H0z" transform="translate(.359 .517)" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconCallBell };

package/src/common/icons-svg/modal-activities/SvgIconCoffee.tsx

@@ -0,0 +1,38 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+import { ISvgProps } from "../interface";
+
+const SvgIconCoffee: React.FC<Omit<ISvgProps, "icon">> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox={`0 0 ${size ?? 24} ${size ?? 24}`}
+  >
+    <G
+      stroke={color ?? "#050022"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      clipPath="url(#clip0_coffee)"
+    >
+      <Path d="M7.81 20.25A8.25 8.25 0 0 1 3 12.75v-4.5h16.5v4.5a8.25 8.25 0 0 1-4.81 7.5M8.25 2.25v3M11.25 2.25v3M14.25 2.25v3M3 20.25h16.5" />
+      <Path d="M19.5 8.25a3 3 0 0 1 3 3V12a3 3 0 0 1-3 3h-.317" />
+    </G>
+    <Defs>
+      <ClipPath id="clip0_coffee">
+        <Path fill={color ?? "#fff"} d="M0 0h24v20a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V0Z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconCoffee };

package/src/common/icons-svg/modal-activities/SvgIconGear.tsx

@@ -0,0 +1,38 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+import { ISvgProps } from "../interface";
+
+const SvgIconGear: React.FC<Omit<ISvgProps, "icon">> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox={`0 0 ${size ?? 24} ${size ?? 24}`}
+  >
+    <G
+      stroke={color ?? "#050022"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      clipPath="url(#clip0_gear)"
+    >
+      <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="clip0_gear">
+        <Path fill={color ?? "#fff"} d="M0 0h24v24H0z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconGear };