@herca/rn-kit 0.1.20 → 0.1.22

package/lib/typescript/src/Icon/icons/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAO7B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAa7B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/typescript/src/Icon/icons/ClipBoardListCheckOutline.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    size?: number;
+    color?: string;
+    style?: object;
+}
+declare const ClipBoardListCheckOutline: React.FC<Props>;
+export default ClipBoardListCheckOutline;
+//# sourceMappingURL=ClipBoardListCheckOutline.d.ts.map

package/lib/typescript/src/Icon/icons/ClipBoardListCheckOutline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClipBoardListCheckOutline.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/ClipBoardListCheckOutline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiB9C,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/lib/typescript/src/Icon/icons/Clock.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    size?: number;
+    color?: string;
+    style?: object;
+}
+declare const Clock: React.FC<Props>;
+export default Clock;
+//# sourceMappingURL=Clock.d.ts.map

package/lib/typescript/src/Icon/icons/Clock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clock.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/Clock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAe1B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/typescript/src/Icon/icons/ClockOutline.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    size?: number;
+    color?: string;
+    style?: object;
+}
+declare const ClockOutline: React.FC<Props>;
+export default ClockOutline;
+//# sourceMappingURL=ClockOutline.d.ts.map

package/lib/typescript/src/Icon/icons/ClockOutline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClockOutline.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/ClockOutline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiBjC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/typescript/src/Icon/icons/PlusSquare.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    size?: number;
+    color?: string;
+    style?: object;
+}
+declare const PlusSquare: React.FC<Props>;
+export default PlusSquare;
+//# sourceMappingURL=PlusSquare.d.ts.map

package/lib/typescript/src/Icon/icons/PlusSquare.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlusSquare.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/PlusSquare.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiB/B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/typescript/src/Icon/icons/Scanner.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    size?: number;
+    color?: string;
+    style?: object;
+}
+declare const Scanner: React.FC<Props>;
+export default Scanner;
+//# sourceMappingURL=Scanner.d.ts.map

package/lib/typescript/src/Icon/icons/Scanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scanner.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/Scanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAa5B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/typescript/src/Icon/type.d.ts

@@ -1,5 +1,5 @@
 import { type ViewStyle } from 'react-native';
-export type IconNameProps = 'Search' | 'User' | 'Eye' | 'EyeOpen' | 'ArrowRight' | 'ArrowLeft' | 'Document' | 'Calendar' | 'ExclamationMark' | 'Download' | 'x-circle' | 'StickyNote' | 'RadioButton' | 'Pdf' | 'ArrowBackAlt' | 'ArrowForwardAlt' | 'ArrowDown' | 'ArrowUp' | 'Check' | 'Filter' | 'AirPlane' | 'Camera' | 'Image' | 'Times' | 'Plus' | 'Minus' | 'Bell' | 'file-list-check' | 'file-text' | 'bookmark-user' | 'folder-clock' | 'home-fill' | 'home-outline' | 'user-circle-outline' | 'user-circle-fill' | 'clipboard-list-check' | 'clipboard-list' | 'Megaphone';
+export type IconNameProps = 'Search' | 'User' | 'Eye' | 'EyeOpen' | 'ArrowRight' | 'ArrowLeft' | 'Document' | 'Calendar' | 'ExclamationMark' | 'Download' | 'x-circle' | 'StickyNote' | 'RadioButton' | 'Pdf' | 'ArrowBackAlt' | 'ArrowForwardAlt' | 'ArrowDown' | 'ArrowUp' | 'Check' | 'Filter' | 'AirPlane' | 'Camera' | 'Image' | 'Times' | 'Plus' | 'Minus' | 'Bell' | 'file-list-check' | 'file-text' | 'bookmark-user' | 'folder-clock' | 'home-fill' | 'home-outline' | 'user-circle-outline' | 'user-circle-fill' | 'clipboard-list-check' | 'clipboard-list' | 'Megaphone' | 'Scanner' | 'Clock' | 'clock-outline' | 'clipboard-list-check-outline' | 'box-outline' | 'Box' | 'plus-square';
 export interface IconProps {
     name: IconNameProps;
     size?: number;

package/lib/typescript/src/Icon/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Icon/type.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,MAAM,GACN,KAAK,GACL,SAAS,GACT,YAAY,GACZ,WAAW,GACX,UAAU,GACV,UAAU,GACV,iBAAiB,GACjB,UAAU,GACV,UAAU,GACV,YAAY,GACZ,aAAa,GACb,KAAK,GACL,cAAc,GACd,iBAAiB,GACjB,WAAW,GACX,SAAS,GACT,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,iBAAiB,GACjB,WAAW,GACX,eAAe,GACf,cAAc,GACd,WAAW,GACX,cAAc,GACd,qBAAqB,GACrB,kBAAkB,GAClB,sBAAsB,GACtB,gBAAgB,GAChB,WAAW,CAAC;AAEhB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Icon/type.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,MAAM,GACN,KAAK,GACL,SAAS,GACT,YAAY,GACZ,WAAW,GACX,UAAU,GACV,UAAU,GACV,iBAAiB,GACjB,UAAU,GACV,UAAU,GACV,YAAY,GACZ,aAAa,GACb,KAAK,GACL,cAAc,GACd,iBAAiB,GACjB,WAAW,GACX,SAAS,GACT,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,iBAAiB,GACjB,WAAW,GACX,eAAe,GACf,cAAc,GACd,WAAW,GACX,cAAc,GACd,qBAAqB,GACrB,kBAAkB,GAClB,sBAAsB,GACtB,gBAAgB,GAChB,WAAW,GACX,SAAS,GACT,OAAO,GACP,eAAe,GACf,8BAA8B,GAC9B,aAAa,GACb,KAAK,GACL,aAAa,CAAC;AAElB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB"}

package/lib/typescript/src/helpers/hexToRgba.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Convert HEX color to RGBA string with given alpha.
+ * Supports #RGB and #RRGGBB format.
+ *
+ * @param hex - HEX color string (e.g. "#000" or "#336699")
+ * @param alpha - Opacity value (0 to 1)
+ * @returns rgba string (e.g. "rgba(51, 102, 153, 0.5)")
+ */
+export declare const hexToRGBA: (hex: string, alpha?: number) => string;
+//# sourceMappingURL=hexToRgba.d.ts.map

package/lib/typescript/src/helpers/hexToRgba.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hexToRgba.d.ts","sourceRoot":"","sources":["../../../../src/helpers/hexToRgba.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,GAAI,KAAK,MAAM,EAAE,QAAO,MAAU,KAAG,MA0B1D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herca/rn-kit",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -86,7 +86,19 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "@react-native-documents/picker": "^10.1.3",
+    "@react-native-documents/viewer": "^1.0.1",
+    "@react-navigation/native": "^7.1.14",
+    "react-native-blob-util": "^0.22.2",
+    "react-native-image-picker": "^8.2.1",
+    "react-native-pager-view": "^6.8.1",
+    "react-native-pdf": "^6.7.7",
+    "react-native-safe-area-context": "^5.5.1",
+    "react-native-screens": "^4.11.1",
+    "react-native-signature-canvas": "^5.0.1",
+    "react-native-svg": "^15.12.0",
+    "react-native-webview": "^13.15.0"
   },
   "workspaces": [
     "example"
@@ -160,19 +172,5 @@
     "languages": "kotlin-objc",
     "type": "turbo-module",
     "version": "0.51.1"
-  },
-  "dependencies": {
-    "@react-native-documents/picker": "^10.1.3",
-    "@react-native-documents/viewer": "^1.0.1",
-    "@react-navigation/native": "^7.1.14",
-    "react-native-blob-util": "^0.22.2",
-    "react-native-image-picker": "^8.2.1",
-    "react-native-pager-view": "^6.8.1",
-    "react-native-pdf": "^6.7.7",
-    "react-native-safe-area-context": "^5.5.1",
-    "react-native-screens": "^4.11.1",
-    "react-native-signature-canvas": "^5.0.1",
-    "react-native-svg": "^15.12.0",
-    "react-native-webview": "^13.15.0"
   }
 }

package/src/Badge/Badge.tsx

@@ -3,21 +3,12 @@ import { View, StyleSheet } from 'react-native';
 import Color from '../Color/Color';
 import Typography from '../Typography/Typography';
 import type { TypographyVariantProps } from '../Typography/type';
+import { hexToRGBA } from '../helpers/hexToRgba';
+import type { HexColor, Size, Variant } from './type';
 
-type Variant =
-  | 'default'
-  | 'primary'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger'
-  | 'orange'
-  | 'purple';
-
-type Size = 'small' | 'medium';
 interface BadgeProps {
   value?: string | number | React.ReactNode;
-  color: Variant;
+  color: Variant | HexColor;
   size?: Size;
   variant?: Variant;
   dot?: boolean;
@@ -67,10 +58,23 @@ const Badge: React.FC<BadgeProps> = ({
   children,
 }) => {
   const safeSize: Size = ['small', 'medium'].includes(size) ? size : 'medium';
-  const { background, fontColor } = COLORS[color];
+
+  const isVariant = Object.prototype.hasOwnProperty.call(COLORS, color);
+
+  const { background, fontColor } = isVariant
+    ? COLORS[color as Variant]
+    : { background: color, fontColor: '#fff' };
+
   const { height, paddingHorizontal, paddingVertical, borderRadius } =
     SIZE_MAP[safeSize];
 
+  const bgRgba = hexToRGBA(
+    typeof color === 'string' && color.startsWith('#') ? color : background,
+    0.1
+  );
+
+  const isHex = typeof color === 'string' && color.startsWith('#');
+
   if (dot) {
     return (
       <View
@@ -94,8 +98,8 @@ const Badge: React.FC<BadgeProps> = ({
         styles.badge,
         {
           height: height,
-          borderRadius: 8,
-          backgroundColor: background,
+          borderRadius: borderRadius,
+          backgroundColor: isHex ? bgRgba : background,
           paddingHorizontal: paddingHorizontal,
           paddingVertical: paddingVertical,
         },
@@ -105,7 +109,7 @@ const Badge: React.FC<BadgeProps> = ({
         children
       ) : (
         <Typography
-          color={fontColor}
+          color={isHex ? color : fontColor}
           variant={SIZE_MAP[safeSize].fontSize}
           weight="medium"
         >

package/src/Badge/README.md

@@ -9,18 +9,19 @@ Komponen `Badge` digunakan untuk menampilkan label kecil yang memberikan informa
 - Dua ukuran tersedia: `small` dan `medium`
 - Mode `dot` untuk hanya menampilkan titik status kecil
 - Bisa menggunakan `children` untuk isi kustom atau gunakan `value` sebagai isi teks
+ - Bisa menggunakan warna custom yang warna background nya menyesuaikan berdasarkan kode warna yang di inputkan ke props `color`
 
 ## 🧱 Props
 
 | Prop       | Tipe                                 | Default     | Deskripsi                                                  |
 |------------|--------------------------------------|-------------|------------------------------------------------------------|
 | `value`    | `string \\| number \\| ReactNode`    | `undefined` | Nilai yang ditampilkan di badge jika `children` tidak ada |
-| `color`    | `'default' \\| 'primary' \\| ...`    | `'default'` | Warna badge                                                |
+| `color`    | `'default'` \\| `'primary'` \\| `...` \\| `#HEX`    | `'default'` | Warna badge, bisa menggunakan nama varian atau kode warna hex seperti `#FF0000`                                                |
 | `size`     | `'small'` \\| `'medium'`             | `'medium'`  | Ukuran badge                                               |
 | `dot`      | `boolean`                            | `false`     | Jika `true`, hanya menampilkan titik kecil                 |
-| `children` | `React.ReactNode`                    | `undefined` | Jika ada, akan menggantikan `value` sebagai isi badge     |
+| `children` | `React.ReactNode`                    | `undefined` | Jika ada, akan menggantikan `value` sebagai isi badge      |
 
-## 🎨 Warna yang Tersedia
+## 🎨 Warna default yang Tersedia
 
 - `default`
 - `primary`
@@ -57,6 +58,14 @@ export default function Example() {
       <Badge color="warning">
         <CustomComponent />
       </Badge>
+
+      {/* badge dengan custom color */}
+      <Badge
+        color="#ba0b5c"
+        size="small"
+        gap={3}
+        value="On Progress"
+      />
     </>
   );
 }

package/src/Badge/type.tsx

@@ -0,0 +1,14 @@
+type Variant =
+  | 'default'
+  | 'primary'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'orange'
+  | 'purple';
+
+type Size = 'small' | 'medium';
+type HexColor = `#${string}`;
+
+export type { Variant, Size, HexColor };

package/src/Icon/Icon.tsx

@@ -38,7 +38,14 @@ import ClipBoardList from './icons/ClipBoardList';
 import Megaphone from './icons/Megaphone';
 import Bell from './icons/Bell';
 import BookmarkUser from './icons/BookmarkUser';
+import Scanner from './icons/Scanner';
+import ClockOutline from './icons/ClockOutline';
+import Clock from './icons/Clock';
+import BoxOutline from './icons/BoxOutline';
+import ClipBoardListCheckOutline from './icons/ClipBoardListCheckOutline';
+import Box from './icons/Box';
 import Minus from './icons/Minus';
+import PlusSquare from './icons/PlusSquare';
 
 const icons: Record<
   IconNameProps,
@@ -82,6 +89,13 @@ const icons: Record<
   'clipboard-list-check': ClipBoardListCheck,
   'clipboard-list': ClipBoardList,
   'Megaphone': Megaphone,
+  'Scanner': Scanner,
+  'clock-outline': ClockOutline,
+  'Clock': Clock,
+  'box-outline': BoxOutline,
+  'clipboard-list-check-outline': ClipBoardListCheckOutline,
+  'Box': Box,
+  'plus-square': PlusSquare,
 };
 
 const Icon: React.FC<IconProps> = ({

package/src/Icon/README.md

@@ -83,4 +83,10 @@ export default function App() {
 - user-circle-fill
 - clipboard-list-check
 - clipboard-list
-- Megaphone
+- Megaphone
+- clipboard-list-check-outline
+- Scanner
+- Clock
+- clock-outline
+- box-outline
+- Box

package/src/Icon/icons/BookmarkUser.tsx

@@ -13,14 +13,14 @@ const BookmarkUser: React.FC<Props> = ({
   style,
 }) => (
   <Svg
-    width={size}
-    height={size + 3}
-    viewBox="0 0 17 20"
+    width={size + 1}
+    height={size}
+    viewBox="0 0 25 24"
     fill="none"
     style={style}
   >
     <Path
-      d="M16.4971 2.56995V16L16.49 15.986V16L14.1411 14.656C14.0471 14.603 13.99 14.503 13.99 14.396C13.99 14.396 13.99 6.50495 13.99 6.47095C13.949 3.98395 12.4439 2.501 9.92993 2.5H4.71704C4.54304 2.5 4.4911 2.34805 4.5061 2.17505C4.6311 0.731049 5.48506 0 7.06006 0H13.9199H13.927C15.637 0 16.4971 0.859946 16.4971 2.56995ZM12.5 6.57104V20L6.5 16.572L0.5 20V6.57104C0.5 4.85705 1.35704 4 3.07104 4H9.92798C11.643 4 12.5 4.85705 12.5 6.57104ZM4.6001 8.40002C4.6001 9.44802 5.453 10.3 6.5 10.3C7.547 10.3 8.3999 9.44802 8.3999 8.40002C8.3999 7.35202 7.547 6.5 6.5 6.5C5.453 6.5 4.6001 7.35202 4.6001 8.40002ZM9.52002 13.746C9.52002 12.58 8.66804 11.4 7.04004 11.4H5.96191C4.33291 11.4 3.48193 12.58 3.48193 13.746V14C3.48193 14.276 3.70593 14.5 3.98193 14.5H9.021C9.297 14.5 9.521 14.276 9.521 14V13.746H9.52002Z"
+      d="M20.4971 4.56995V18L20.49 17.986V18L18.1411 16.656C18.0471 16.603 17.99 16.503 17.99 16.396C17.99 16.396 17.99 8.50495 17.99 8.47095C17.949 5.98395 16.4439 4.501 13.9299 4.5H8.71704C8.54304 4.5 8.4911 4.34805 8.5061 4.17505C8.6311 2.73105 9.48506 2 11.0601 2H17.9199H17.927C19.637 2 20.4971 2.85995 20.4971 4.56995ZM16.5 8.57104V22L10.5 18.572L4.5 22V8.57104C4.5 6.85705 5.35704 6 7.07104 6H13.928C15.643 6 16.5 6.85705 16.5 8.57104ZM8.6001 10.4C8.6001 11.448 9.453 12.3 10.5 12.3C11.547 12.3 12.3999 11.448 12.3999 10.4C12.3999 9.35202 11.547 8.5 10.5 8.5C9.453 8.5 8.6001 9.35202 8.6001 10.4ZM13.52 15.746C13.52 14.58 12.668 13.4 11.04 13.4H9.96191C8.33291 13.4 7.48193 14.58 7.48193 15.746V16C7.48193 16.276 7.70593 16.5 7.98193 16.5H13.021C13.297 16.5 13.521 16.276 13.521 16V15.746H13.52Z"
       fill={color}
     />
   </Svg>

package/src/Icon/icons/Box.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Box: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg
+    width={size - 1}
+    height={size}
+    viewBox="0 0 24 25"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M10.48 11.9191C10.73 12.0291 10.99 12.0992 11.25 12.1592V21.6792C11.09 21.6392 10.93 21.5791 10.78 21.5091L4.78003 18.8392C3.70003 18.3592 3 17.2891 3 16.0991V9.43917C3 9.16917 3.03999 8.89916 3.10999 8.64916L10.48 11.9191ZM14.8199 9.68917L6.67004 5.85915L4.78003 6.69915C4.43003 6.84915 4.13 7.06915 3.87 7.32915L11.08 10.5391C11.66 10.7991 12.33 10.7991 12.92 10.5391L14.8199 9.68917ZM20.13 7.32915C19.87 7.06915 19.57 6.84915 19.22 6.69915L13.22 4.02916C12.44 3.67916 11.56 3.67916 10.78 4.02916L8.48999 5.04915L16.64 8.87914L20.13 7.32915ZM20.89 8.64916L17.38 10.2092V12.6592C17.38 13.0692 17.04 13.4092 16.63 13.4092C16.22 13.4092 15.88 13.0692 15.88 12.6592V10.8692L13.52 11.9191C13.27 12.0191 13.01 12.0992 12.75 12.1592V21.6792C12.91 21.6392 13.07 21.5791 13.22 21.5091L19.22 18.8392C20.3 18.3592 21 17.2891 21 16.0991V9.43917C21 9.16917 20.96 8.89916 20.89 8.64916Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Box;

package/src/Icon/icons/BoxOutline.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const BoxOutline: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg
+    width={size + 1}
+    height={size}
+    viewBox="0 0 25 24"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M21.6619 6.88195C21.6609 6.87995 21.6619 6.87797 21.6609 6.87597C21.6589 6.87097 21.6539 6.86797 21.6519 6.86297C21.2649 6.15997 20.6619 5.57996 19.8999 5.24096L13.8999 2.57396C12.9309 2.14396 11.8219 2.14396 10.8529 2.57396L4.85291 5.24096C4.08991 5.57996 3.48783 6.15997 3.10083 6.86297C3.09883 6.86797 3.09392 6.87097 3.09192 6.87597C3.09092 6.87797 3.09182 6.87995 3.09082 6.88195C2.79782 7.42095 2.62793 8.02895 2.62793 8.66695V15.334C2.62793 16.814 3.50186 18.1589 4.85486 18.7609L10.8549 21.428C11.3369 21.642 11.8538 21.748 12.3708 21.75C12.3738 21.75 12.3759 21.751 12.3789 21.751C12.3819 21.751 12.3838 21.75 12.3868 21.75C12.9038 21.749 13.4208 21.642 13.9028 21.428L19.9028 18.7609C21.2558 18.1599 22.1299 16.815 22.1299 15.334V8.66695C22.1249 8.02895 21.9549 7.41995 21.6619 6.88195ZM11.4609 3.94396C11.7509 3.81496 12.0639 3.74996 12.3749 3.74996C12.6859 3.74996 12.9988 3.81395 13.2888 3.94295L19.2888 6.60995C19.4588 6.68595 19.6079 6.79097 19.7509 6.90197L17.0178 8.11696L9.75891 4.69997L11.4609 3.94396ZM7.94788 5.50496L15.2069 8.92196L13.2949 9.77196C12.7089 10.027 12.0378 10.0269 11.4598 9.77395L4.9989 6.90197C5.1419 6.79097 5.29094 6.68495 5.46094 6.60995L7.94788 5.50496ZM5.46094 17.389C4.64894 17.028 4.12488 16.221 4.12488 15.333V8.66595C4.12488 8.50095 4.16082 8.34297 4.19482 8.18697L10.8549 11.147C11.1039 11.255 11.3619 11.3339 11.6249 11.3859V20.108C11.5709 20.089 11.5139 20.078 11.4609 20.055L5.46094 17.389ZM20.6249 15.333C20.6249 16.221 20.1008 17.028 19.2888 17.389L13.2888 20.056C13.2358 20.08 13.1789 20.09 13.1249 20.109V11.3859C13.3889 11.3329 13.6489 11.2539 13.8989 11.1449L16.2539 10.098V11.89C16.2539 12.304 16.5899 12.64 17.0039 12.64C17.4179 12.64 17.7539 12.304 17.7539 11.89V9.43197L20.5538 8.18795C20.5888 8.34495 20.6239 8.50195 20.6239 8.66695V15.333H20.6249Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default BoxOutline;

package/src/Icon/icons/Calendar.tsx

@@ -8,9 +8,15 @@ interface Props {
 }
 
 const Calendar: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
-  <Svg width={size} height={size} viewBox="0 0 12 13" fill="none" style={style}>
+  <Svg
+    width={size}
+    height={size + 1}
+    viewBox="0 0 24 25"
+    fill="none"
+    style={style}
+  >
     <Path
-      d="M11.8 5.5H0.200033C0.0893659 5.5 0 5.58937 0 5.70003V11C0 12.3333 0.666667 13 2 13H10C11.3333 13 12 12.3333 12 11V5.70003C12 5.58937 11.9106 5.5 11.8 5.5ZM3.34668 11C2.97868 11 2.67659 10.7013 2.67659 10.3333C2.67659 9.96533 2.97201 9.66667 3.34001 9.66667H3.34668C3.71535 9.66667 4.01335 9.96533 4.01335 10.3333C4.01335 10.7013 3.71468 11 3.34668 11ZM3.34668 8.33333C2.97868 8.33333 2.67659 8.03467 2.67659 7.66667C2.67659 7.29867 2.97201 7 3.34001 7H3.34668C3.71535 7 4.01335 7.29867 4.01335 7.66667C4.01335 8.03467 3.71468 8.33333 3.34668 8.33333ZM6.01335 11C5.64535 11 5.34326 10.7013 5.34326 10.3333C5.34326 9.96533 5.63867 9.66667 6.00667 9.66667H6.01335C6.38201 9.66667 6.68001 9.96533 6.68001 10.3333C6.68001 10.7013 6.38135 11 6.01335 11ZM6.01335 8.33333C5.64535 8.33333 5.34326 8.03467 5.34326 7.66667C5.34326 7.29867 5.63867 7 6.00667 7H6.01335C6.38201 7 6.68001 7.29867 6.68001 7.66667C6.68001 8.03467 6.38135 8.33333 6.01335 8.33333ZM8.68001 11C8.31201 11 8.00993 10.7013 8.00993 10.3333C8.00993 9.96533 8.30534 9.66667 8.67334 9.66667H8.68001C9.04868 9.66667 9.34668 9.96533 9.34668 10.3333C9.34668 10.7013 9.04801 11 8.68001 11ZM8.68001 8.33333C8.31201 8.33333 8.00993 8.03467 8.00993 7.66667C8.00993 7.29867 8.30534 7 8.67334 7H8.68001C9.04868 7 9.34668 7.29867 9.34668 7.66667C9.34668 8.03467 9.04801 8.33333 8.68001 8.33333ZM12 4V4.29997C12 4.41063 11.9106 4.5 11.8 4.5H0.200033C0.0893659 4.5 0 4.41063 0 4.29997V4C0 2.66667 0.666667 2 2 2H2.83333V1C2.83333 0.726667 3.06 0.5 3.33333 0.5C3.60667 0.5 3.83333 0.726667 3.83333 1V2H8.16667V1C8.16667 0.726667 8.39333 0.5 8.66667 0.5C8.94 0.5 9.16667 0.726667 9.16667 1V2H10C11.3333 2 12 2.66667 12 4Z"
+      d="M20.7 10.0577H3.30005C3.13405 10.0577 3 10.1917 3 10.3577V18.3077C3 20.3077 4 21.3077 6 21.3077H18C20 21.3077 21 20.3077 21 18.3077V10.3577C21 10.1917 20.866 10.0577 20.7 10.0577ZM8.02002 18.3077C7.46802 18.3077 7.01489 17.8597 7.01489 17.3077C7.01489 16.7557 7.45801 16.3077 8.01001 16.3077H8.02002C8.57302 16.3077 9.02002 16.7557 9.02002 17.3077C9.02002 17.8597 8.57202 18.3077 8.02002 18.3077ZM8.02002 14.3077C7.46802 14.3077 7.01489 13.8597 7.01489 13.3077C7.01489 12.7557 7.45801 12.3077 8.01001 12.3077H8.02002C8.57302 12.3077 9.02002 12.7557 9.02002 13.3077C9.02002 13.8597 8.57202 14.3077 8.02002 14.3077ZM12.02 18.3077C11.468 18.3077 11.0149 17.8597 11.0149 17.3077C11.0149 16.7557 11.458 16.3077 12.01 16.3077H12.02C12.573 16.3077 13.02 16.7557 13.02 17.3077C13.02 17.8597 12.572 18.3077 12.02 18.3077ZM12.02 14.3077C11.468 14.3077 11.0149 13.8597 11.0149 13.3077C11.0149 12.7557 11.458 12.3077 12.01 12.3077H12.02C12.573 12.3077 13.02 12.7557 13.02 13.3077C13.02 13.8597 12.572 14.3077 12.02 14.3077ZM16.02 18.3077C15.468 18.3077 15.0149 17.8597 15.0149 17.3077C15.0149 16.7557 15.458 16.3077 16.01 16.3077H16.02C16.573 16.3077 17.02 16.7557 17.02 17.3077C17.02 17.8597 16.572 18.3077 16.02 18.3077ZM16.02 14.3077C15.468 14.3077 15.0149 13.8597 15.0149 13.3077C15.0149 12.7557 15.458 12.3077 16.01 12.3077H16.02C16.573 12.3077 17.02 12.7557 17.02 13.3077C17.02 13.8597 16.572 14.3077 16.02 14.3077ZM21 7.80768V8.25763C21 8.42363 20.866 8.55768 20.7 8.55768H3.30005C3.13405 8.55768 3 8.42363 3 8.25763V7.80768C3 5.80768 4 4.80768 6 4.80768H7.25V3.30768C7.25 2.89768 7.59 2.55768 8 2.55768C8.41 2.55768 8.75 2.89768 8.75 3.30768V4.80768H15.25V3.30768C15.25 2.89768 15.59 2.55768 16 2.55768C16.41 2.55768 16.75 2.89768 16.75 3.30768V4.80768H18C20 4.80768 21 5.80768 21 7.80768Z"
       fill={color}
     />
   </Svg>

package/src/Icon/icons/ClipBoardListCheckOutline.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ClipBoardListCheckOutline: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg
+    width={size}
+    height={size - 1}
+    viewBox="0 0 25 24"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M17.625 4.25H17.355C17.258 2.996 16.446 2.25 15.125 2.25H10.125C8.804 2.25 7.99202 2.996 7.89502 4.25H7.625C5.207 4.25 3.875 5.582 3.875 8V18C3.875 20.418 5.207 21.75 7.625 21.75H17.625C20.043 21.75 21.375 20.418 21.375 18V8C21.375 5.582 20.043 4.25 17.625 4.25ZM9.375 4.5C9.375 3.911 9.536 3.75 10.125 3.75H15.125C15.714 3.75 15.875 3.911 15.875 4.5V5.5C15.875 6.089 15.714 6.25 15.125 6.25H10.125C9.536 6.25 9.375 6.089 9.375 5.5V4.5ZM19.875 18C19.875 19.577 19.202 20.25 17.625 20.25H7.625C6.048 20.25 5.375 19.577 5.375 18V8C5.375 6.423 6.048 5.75 7.625 5.75H7.89502C7.99202 7.004 8.804 7.75 10.125 7.75H15.125C16.446 7.75 17.258 7.004 17.355 5.75H17.625C19.202 5.75 19.875 6.423 19.875 8V18ZM17.875 12C17.875 12.414 17.539 12.75 17.125 12.75H13.125C12.711 12.75 12.375 12.414 12.375 12C12.375 11.586 12.711 11.25 13.125 11.25H17.125C17.539 11.25 17.875 11.586 17.875 12ZM17.875 16C17.875 16.414 17.539 16.75 17.125 16.75H13.125C12.711 16.75 12.375 16.414 12.375 16C12.375 15.586 12.711 15.25 13.125 15.25H17.125C17.539 15.25 17.875 15.586 17.875 16ZM10.655 10.803C10.948 11.096 10.948 11.571 10.655 11.864L9.32202 13.197C9.18102 13.338 8.99099 13.417 8.79199 13.417C8.59299 13.417 8.40196 13.338 8.26196 13.198L7.59497 12.531C7.30197 12.238 7.30197 11.763 7.59497 11.47C7.88797 11.177 8.36301 11.177 8.65601 11.47L8.79297 11.607L9.59595 10.804C9.88795 10.51 10.362 10.51 10.655 10.803ZM10.655 14.803C10.948 15.096 10.948 15.571 10.655 15.864L9.32202 17.197C9.18102 17.338 8.99099 17.417 8.79199 17.417C8.59299 17.417 8.40196 17.338 8.26196 17.198L7.59497 16.531C7.30197 16.238 7.30197 15.763 7.59497 15.47C7.88797 15.177 8.36301 15.177 8.65601 15.47L8.79297 15.607L9.59595 14.804C9.88795 14.51 10.362 14.51 10.655 14.803Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ClipBoardListCheckOutline;

package/src/Icon/icons/Clock.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Clock: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg
+    width={size}
+    height={size + 1}
+    viewBox="0 0 24 25"
+    fill="none"
+    style={style}
+  >
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 2.61539C6.477 2.61539 2 7.09239 2 12.6154C2 18.1384 6.477 22.6154 12 22.6154C17.523 22.6154 22 18.1384 22 12.6154C22 7.09239 17.523 2.61539 12 2.61539ZM15.53 16.1454C15.384 16.2914 15.192 16.3654 15 16.3654C14.808 16.3654 14.616 16.2924 14.47 16.1454L11.47 13.1454C11.329 13.0044 11.25 12.8134 11.25 12.6154V7.61539C11.25 7.20139 11.586 6.86539 12 6.86539C12.414 6.86539 12.75 7.20139 12.75 7.61539V12.3044L15.53 15.0844C15.823 15.3784 15.823 15.8524 15.53 16.1454Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Clock;

package/src/Icon/icons/ClockOutline.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ClockOutline: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg
+    width={size}
+    height={size + 1}
+    viewBox="0 0 24 25"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M12 1.9422C6.072 1.9422 1.25 6.7642 1.25 12.6922C1.25 18.6202 6.072 23.4422 12 23.4422C17.928 23.4422 22.75 18.6202 22.75 12.6922C22.75 6.7642 17.928 1.9422 12 1.9422ZM12 21.9422C6.899 21.9422 2.75 17.7932 2.75 12.6922C2.75 7.5912 6.899 3.4422 12 3.4422C17.101 3.4422 21.25 7.5912 21.25 12.6922C21.25 17.7932 17.101 21.9422 12 21.9422ZM15.53 15.1622C15.823 15.4552 15.823 15.9302 15.53 16.2232C15.384 16.3692 15.192 16.4432 15 16.4432C14.808 16.4432 14.616 16.3702 14.47 16.2232L11.47 13.2232C11.329 13.0822 11.25 12.8912 11.25 12.6932V7.69318C11.25 7.27918 11.586 6.94318 12 6.94318C12.414 6.94318 12.75 7.27918 12.75 7.69318V12.3821L15.53 15.1622Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ClockOutline;

package/src/Icon/icons/FolderClock.tsx

@@ -9,14 +9,14 @@ interface Props {
 
 const FolderClock: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
   <Svg
-    width={size}
-    height={size - 2}
-    viewBox="0 0 19 16"
+    width={size + 1}
+    height={size}
+    viewBox="0 0 25 24"
     fill="none"
     style={style}
   >
     <Path
-      d="M10.791 10.084C10.986 10.279 10.986 10.596 10.791 10.791C10.693 10.889 10.565 10.937 10.437 10.937C10.309 10.937 10.181 10.888 10.083 10.791L9.14502 9.854C9.05102 9.76 8.99902 9.633 8.99902 9.5V8.18799C8.99902 7.91199 9.22302 7.68799 9.49902 7.68799C9.77502 7.68799 9.99902 7.91199 9.99902 8.18799V9.293L10.791 10.084ZM18.5 6V13C18.5 15 17.5 16 15.5 16H3.5C1.5 16 0.5 15 0.5 13V3C0.5 1 1.5 0 3.5 0H7.5L10.5 3H15.5C17.5 3 18.5 4 18.5 6ZM13 9.5C13 7.567 11.433 6 9.5 6C7.567 6 6 7.567 6 9.5C6 11.433 7.567 13 9.5 13C11.433 13 13 11.433 13 9.5Z"
+      d="M13.791 14.084C13.986 14.279 13.986 14.596 13.791 14.791C13.693 14.889 13.565 14.937 13.437 14.937C13.309 14.937 13.181 14.888 13.083 14.791L12.145 13.854C12.051 13.76 11.999 13.633 11.999 13.5V12.188C11.999 11.912 12.223 11.688 12.499 11.688C12.775 11.688 12.999 11.912 12.999 12.188V13.293L13.791 14.084ZM21.5 10V17C21.5 19 20.5 20 18.5 20H6.5C4.5 20 3.5 19 3.5 17V7C3.5 5 4.5 4 6.5 4H10.5L13.5 7H18.5C20.5 7 21.5 8 21.5 10ZM16 13.5C16 11.567 14.433 10 12.5 10C10.567 10 9 11.567 9 13.5C9 15.433 10.567 17 12.5 17C14.433 17 16 15.433 16 13.5Z"
       fill={color}
     />
   </Svg>

package/src/Icon/icons/PlusSquare.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const PlusSquare: React.FC<Props> = ({
+  size = 24,
+  color = '#909090',
+  style,
+}) => (
+  <Svg
+    width={size + 1}
+    height={size}
+    viewBox="0 0 41 40"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M29.8667 5H11.1333C7.38334 5 5.5 6.86666 5.5 10.6167V29.3667C5.5 33.1167 7.38334 35 11.1333 35H29.8667C33.6333 35 35.5 33.1167 35.5 29.3667V10.6167C35.5 6.86666 33.6333 5 29.8667 5ZM26.3333 21.25H21.75V25.8333C21.75 26.5167 21.1833 27.0833 20.5 27.0833C19.8167 27.0833 19.25 26.5167 19.25 25.8333V21.25H14.6667C13.9833 21.25 13.4167 20.6833 13.4167 20C13.4167 19.3167 13.9833 18.75 14.6667 18.75H19.25V14.1667C19.25 13.4833 19.8167 12.9167 20.5 12.9167C21.1833 12.9167 21.75 13.4833 21.75 14.1667V18.75H26.3333C27.0167 18.75 27.5833 19.3167 27.5833 20C27.5833 20.6833 27.0167 21.25 26.3333 21.25Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default PlusSquare;

package/src/Icon/icons/Scanner.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Scanner: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg
+    width={size + 1}
+    height={size}
+    viewBox="0 0 25 24"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M2.625 8V4.5C2.625 3.091 3.466 2.25 4.875 2.25H8.375C8.789 2.25 9.125 2.586 9.125 3C9.125 3.414 8.789 3.75 8.375 3.75H4.875C4.286 3.75 4.125 3.911 4.125 4.5V8C4.125 8.414 3.789 8.75 3.375 8.75C2.961 8.75 2.625 8.414 2.625 8ZM8.375 20.25H4.875C4.286 20.25 4.125 20.089 4.125 19.5V16C4.125 15.586 3.789 15.25 3.375 15.25C2.961 15.25 2.625 15.586 2.625 16V19.5C2.625 20.909 3.466 21.75 4.875 21.75H8.375C8.789 21.75 9.125 21.414 9.125 21C9.125 20.586 8.789 20.25 8.375 20.25ZM21.375 15.25C20.961 15.25 20.625 15.586 20.625 16V19.5C20.625 20.089 20.464 20.25 19.875 20.25H16.375C15.961 20.25 15.625 20.586 15.625 21C15.625 21.414 15.961 21.75 16.375 21.75H19.875C21.284 21.75 22.125 20.909 22.125 19.5V16C22.125 15.586 21.789 15.25 21.375 15.25ZM19.875 2.25H16.375C15.961 2.25 15.625 2.586 15.625 3C15.625 3.414 15.961 3.75 16.375 3.75H19.875C20.464 3.75 20.625 3.911 20.625 4.5V8C20.625 8.414 20.961 8.75 21.375 8.75C21.789 8.75 22.125 8.414 22.125 8V4.5C22.125 3.091 21.284 2.25 19.875 2.25ZM17.875 15.12V12.75H19.375C19.789 12.75 20.125 12.414 20.125 12C20.125 11.586 19.789 11.25 19.375 11.25H5.375C4.961 11.25 4.625 11.586 4.625 12C4.625 12.414 4.961 12.75 5.375 12.75H6.875V15.12C6.875 16.65 7.715 17.5 9.255 17.5H15.495C17.035 17.5 17.875 16.65 17.875 15.12ZM6.625 8.88V9C6.625 9.414 6.961 9.75 7.375 9.75C7.789 9.75 8.125 9.414 8.125 9V8.88C8.125 8.035 8.41 7.75 9.255 7.75H15.495C16.34 7.75 16.625 8.035 16.625 8.88V9C16.625 9.414 16.961 9.75 17.375 9.75C17.789 9.75 18.125 9.414 18.125 9V8.88C18.125 7.209 17.166 6.25 15.495 6.25H9.255C7.584 6.25 6.625 7.208 6.625 8.88Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Scanner;