@kivid/icons 1.0.0-alpha.10 → 1.0.0-alpha.15

package/src/components/native/ChevronUp.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef, memo } from "react";
+import { cssInterop } from "nativewind";
+interface Props extends SvgProps {
+  size?: number;
+  color?: string;
+}
+const ChevronUp = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M5.47064 14.918L12.0206 9.08197L18.5706 14.918"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ChevronUp.displayName = "ChevronUp";
+const ForwardRef = forwardRef(ChevronUp);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ChevronUp };

package/src/components/native/Clinic.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef, memo } from "react";
+import { cssInterop } from "nativewind";
+interface Props extends SvgProps {
+  size?: number;
+  color?: string;
+}
+const Clinic = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M3 8V21M3 8H7.00001M3 8C2.44772 8 2.00001 7.55228 2.00001 7V6C2.00001 5.44772 2.44773 5 3.00001 5H7.00001M7.00001 8V5M7.00001 8C7.00001 9.10457 7.89543 10 9 10H15C16.1046 10 16.9995 9.10457 16.9995 8M7.00001 5C7.00001 3.89543 7.89543 3 9 3H15C16.1046 3 16.9995 3.89543 16.9995 5M16.9995 5H21C21.5523 5 22 5.44772 22 6V7C22 7.55228 21.5523 8 21 8M16.9995 5V8M21 8H16.9995M21 8L21 21M12 5.25V7.75M13.25 6.5H10.75M22 21H2M12 20.7103V14M16 21V15C16 14.4477 15.5523 14 15 14H9.00001C8.44773 14 8.00001 14.4477 8.00001 15V21"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Clinic.displayName = "Clinic";
+const ForwardRef = forwardRef(Clinic);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Clinic };

package/src/components/native/ClinicDrugs.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef, memo } from "react";
+import { cssInterop } from "nativewind";
+interface Props extends SvgProps {
+  size?: number;
+  color?: string;
+}
+const ClinicDrugs = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M12 4.75V7.25M13.25 6H10.75M8 21V15C8 14.4477 8.44772 14 9 14H12M3 8V21M3 8H8.53567M3 8C2.44772 8 2 7.55228 2 7V6C2 5.44772 2.44772 5 3 5H8.12639M21 11V8M21 8C21.5523 8 22 7.55228 22 7V6C22 5.44772 21.5523 5 21 5H15.8737M21 8H15.4643M11 21H2M15.4326 15.434L19.0666 19.0671M16 6C16 8.20914 14.2091 10 12 10C9.79086 10 8 8.20914 8 6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6ZM14.2525 16.614L16.614 14.2525C17.0958 13.7707 17.7493 13.5 18.4307 13.5C19.1121 13.5 19.7656 13.7707 20.2475 14.2525C21.2508 15.2559 21.2508 16.8827 20.2475 17.886L17.886 20.2475C17.4042 20.7293 16.7507 21 16.0693 21C15.3879 21 14.7343 20.7293 14.2525 20.2475C13.2492 19.2441 13.2492 17.6174 14.2525 16.614Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ClinicDrugs.displayName = "ClinicDrugs";
+const ForwardRef = forwardRef(ClinicDrugs);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ClinicDrugs };

package/src/components/native/ClinicPin.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef, memo } from "react";
+import { cssInterop } from "nativewind";
+interface Props extends SvgProps {
+  size?: number;
+  color?: string;
+}
+const ClinicPin = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M12 4.75V7.25M13.25 6H10.75M8 21V15C8 14.4477 8.44772 14 9 14H11M3 8V21M3 8H8.53567M3 8C2.44772 8 2 7.55228 2 7V6C2 5.44772 2.44772 5 3 5H8.12639M21 11V8M21 8C21.5523 8 22 7.55228 22 7V6C22 5.44772 21.5523 5 21 5H15.8737M21 8H15.4643M12 21H2M16 6C16 8.20914 14.2091 10 12 10C9.79086 10 8 8.20914 8 6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6ZM14 16.5C14 18.1385 15.788 19.8888 16.808 20.7544C17.2108 21.0819 17.7882 21.0819 18.191 20.7544C19.212 19.8888 21 18.1385 21 16.5C21 14.567 19.433 13 17.5 13C15.567 13 14 14.567 14 16.5ZM17.501 16.24C17.6445 16.2406 17.7604 16.3572 17.76 16.5007C17.7596 16.6441 17.6431 16.7602 17.4997 16.76C17.3562 16.7598 17.24 16.6435 17.24 16.5C17.2396 16.4308 17.267 16.3643 17.3161 16.3154C17.3652 16.2665 17.4318 16.2394 17.501 16.24Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ClinicPin.displayName = "ClinicPin";
+const ForwardRef = forwardRef(ClinicPin);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ClinicPin };

package/src/components/native/ClipboardCheck.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef, memo } from "react";
+import { cssInterop } from "nativewind";
+interface Props extends SvgProps {
+  size?: number;
+  color?: string;
+}
+const ClipboardCheck = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M12.0206 22C17.5434 22 22.0206 17.5228 22.0206 12C22.0206 6.47715 17.5434 2 12.0206 2C6.49772 2 2.02057 6.47715 2.02057 12C2.02057 17.5228 6.49772 22 12.0206 22ZM12.0206 22C9.52057 22 7.22056 21.1 5.42056 19.5V11.4C5.42056 9.89997 6.72056 8.59998 8.22056 8.59998H8.72056C8.72056 9.29998 9.32056 9.89997 10.0206 9.89997H14.0206M12.0206 22C14.5206 22 16.8206 21.1 18.6206 19.5V11.4C18.6206 9.89997 17.3206 8.59998 15.8206 8.59998H15.3206M15.3206 8.59998C15.3206 9.29998 14.7206 9.89997 14.0206 9.89997M15.3206 8.59998C15.3206 7.89998 14.7206 7.29999 14.0206 7.29999H9.92057C9.22057 7.29999 8.62057 7.89999 8.62057 8.59999C8.62057 9.29999 9.22057 9.89999 9.92057 9.89999L14.0206 9.89997M14.7206 13.9L11.7206 16.9L10.0206 15.2"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ClipboardCheck.displayName = "ClipboardCheck";
+const ForwardRef = forwardRef(ClipboardCheck);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ClipboardCheck };

package/src/components/native/Clock.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef, memo } from "react";
+import { cssInterop } from "nativewind";
+interface Props extends SvgProps {
+  size?: number;
+  color?: string;
+}
+const Clock = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M11.1316 3.29053V12.8905H20.7316M18.2986 9.57952C17.5112 7.7291 16.0436 6.25149 14.1986 5.45153M18.9536 12.8875C18.9536 14.4346 18.4948 15.9469 17.6353 17.2332C16.7758 18.5195 15.5542 19.5221 14.1249 20.1141C12.6956 20.7062 11.1229 20.861 9.60556 20.5592C8.08824 20.2574 6.69451 19.5124 5.60058 18.4185C4.50666 17.3246 3.76168 15.9308 3.45987 14.4135C3.15805 12.8962 3.31297 11.3234 3.905 9.89416C4.49703 8.46488 5.49957 7.24328 6.78589 6.38378C8.07221 5.52429 9.58451 5.06555 11.1316 5.06555"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Clock.displayName = "Clock";
+const ForwardRef = forwardRef(Clock);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Clock };

package/src/components/native/ClockBack.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef, memo } from "react";
+import { cssInterop } from "nativewind";
+interface Props extends SvgProps {
+  size?: number;
+  color?: string;
+}
+const ClockBack = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M13.4477 3.06201C15.0777 3.33547 16.601 4.05252 17.8504 5.13452C19.0998 6.21653 20.0272 7.62156 20.5307 9.1958C21.0343 10.77 21.0947 12.4526 20.7051 14.0588C20.3156 15.6651 19.4913 17.1333 18.3226 18.302C17.1538 19.4707 15.6859 20.2948 14.0796 20.6843C12.4733 21.0738 10.7908 21.0136 9.21658 20.51C7.64234 20.0064 6.23716 19.079 5.15515 17.8296C4.07315 16.5802 3.3561 15.057 3.08264 13.427M3.08264 10.426C3.17619 9.86874 3.32253 9.32158 3.51965 8.79199M6.21164 4.99097C5.77497 5.35254 5.37323 5.75425 5.01166 6.19092M10.4477 3.06201C9.89037 3.15552 9.34323 3.30186 8.81366 3.49902M12.4066 6.99292V12.384H8.01566"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ClockBack.displayName = "ClockBack";
+const ForwardRef = forwardRef(ClockBack);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ClockBack };

package/src/components/native/Close.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef, memo } from "react";
+import { cssInterop } from "nativewind";
+interface Props extends SvgProps {
+  size?: number;
+  color?: string;
+}
+const Close = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M6.02063 6L18.0206 18M18.0206 6L6.02063 18"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Close.displayName = "Close";
+const ForwardRef = forwardRef(Close);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Close };

package/src/components/native/CloseCircle.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef, memo } from "react";
+import { cssInterop } from "nativewind";
+interface Props extends SvgProps {
+  size?: number;
+  color?: string;
+}
+const CloseCircle = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M8.96564 8.943L15.0656 15.043M15.0676 8.943L8.96762 15.043M22.3956 12C22.3956 17.73 17.7506 22.375 12.0206 22.375C6.29068 22.375 1.64563 17.73 1.64563 12C1.64563 6.27005 6.29068 1.625 12.0206 1.625C17.7506 1.625 22.3956 6.27005 22.3956 12Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+CloseCircle.displayName = "CloseCircle";
+const ForwardRef = forwardRef(CloseCircle);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as CloseCircle };

package/src/components/native/CloudDownload.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef, memo } from "react";
+import { cssInterop } from "nativewind";
+interface Props extends SvgProps {
+  size?: number;
+  color?: string;
+}
+const CloudDownload = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M12.0206 14V20M12.0206 20L9.52057 17.5M12.0206 20L14.5206 17.5M6.52052 18C4.11829 18.0063 2.13705 16.1199 2.02549 13.7203C1.91394 11.3206 3.71163 9.25861 6.10408 9.04199C6.57074 6.13662 9.07789 4 12.0205 4C14.9631 4 17.4704 6.13662 17.937 9.04199C20.3295 9.25861 22.1272 11.3206 22.0156 13.7203C21.904 16.1199 19.9228 18.0063 17.5206 18"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+CloudDownload.displayName = "CloudDownload";
+const ForwardRef = forwardRef(CloudDownload);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as CloudDownload };

package/src/components/native/CloudUpload.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef, memo } from "react";
+import { cssInterop } from "nativewind";
+interface Props extends SvgProps {
+  size?: number;
+  color?: string;
+}
+const CloudUpload = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M11.0205 17V11M11.0205 11L13.5205 13.5M11.0205 11L8.52046 13.5M16.0205 15H16.5205C18.9227 15.0063 20.9039 13.1199 21.0155 10.7203C21.1271 8.32063 19.3294 6.25861 16.9369 6.04199C16.4702 3.13661 13.9631 1 11.0205 1C8.07785 1 5.57068 3.13661 5.10402 6.04199C2.71157 6.25861 0.913875 8.32063 1.02543 10.7203C1.13698 13.1199 3.11823 15.0063 5.52046 15H6.02046"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+CloudUpload.displayName = "CloudUpload";
+const ForwardRef = forwardRef(CloudUpload);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as CloudUpload };

package/src/components/native/Compass.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef, memo } from "react";
+import { cssInterop } from "nativewind";
+interface Props extends SvgProps {
+  size?: number;
+  color?: string;
+}
+const Compass = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M12.0206 21.0001C13.8007 21.0001 15.5407 20.4719 17.0208 19.483C18.5008 18.494 19.6544 17.0885 20.3356 15.4439C21.0168 13.7994 21.1949 11.99 20.8477 10.2442C20.5004 8.49838 19.6432 6.89449 18.3845 5.63581C17.1258 4.37714 15.5222 3.52019 13.7764 3.17292C12.0305 2.82566 10.221 3.00394 8.57642 3.68513C6.93188 4.36632 5.52629 5.52003 4.53735 7.00007C3.54842 8.48011 3.02063 10.22 3.02063 12.0001M12.0206 21.0001C9.63587 20.9929 7.35084 20.0423 5.66455 18.356C3.97826 16.6697 3.02775 14.3848 3.02063 12.0001M12.0206 21.0001V19.5M3.02063 12.0001L4.52063 12M12.0206 3V4.5M21.0206 12H19.5206M10.2566 9.55294L15.1846 8.2253C15.2694 8.20248 15.3587 8.20217 15.4435 8.22481C15.5283 8.24745 15.6057 8.29218 15.6679 8.35421C15.73 8.41624 15.7747 8.49354 15.7975 8.57833C15.8203 8.66312 15.8203 8.7523 15.7976 8.83712L14.4906 13.737C14.4454 13.9066 14.3564 14.0615 14.2324 14.1858C14.1085 14.31 13.954 14.3994 13.7846 14.445L8.85755 15.7732C8.7727 15.7962 8.68337 15.7962 8.59839 15.7736C8.51341 15.7511 8.43581 15.7068 8.37354 15.6447C8.31127 15.5827 8.26648 15.505 8.24366 15.4201C8.22084 15.3352 8.22089 15.2463 8.24366 15.1613L9.55066 10.2609C9.59586 10.0914 9.68479 9.93698 9.80872 9.8127C9.93265 9.68843 10.0871 9.59862 10.2566 9.55294Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Compass.displayName = "Compass";
+const ForwardRef = forwardRef(Compass);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Compass };

package/src/components/native/Connect.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef, memo } from "react";
+import { cssInterop } from "nativewind";
+interface Props extends SvgProps {
+  size?: number;
+  color?: string;
+}
+const Connect = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M11.0206 15H13.0206C13.8163 15 14.5793 14.6839 15.142 14.1213C15.7046 13.5587 16.0206 12.7956 16.0206 12V8C16.0206 7.20435 15.7046 6.44129 15.142 5.87868C14.5793 5.31607 13.8163 5 13.0206 5H5.02063C4.22498 5 3.46192 5.31607 2.89931 5.87868C2.3367 6.44129 2.02063 7.20435 2.02063 8V12C2.02063 12.7956 2.3367 13.5587 2.89931 14.1213C3.46192 14.6839 4.22498 15 5.02063 15M13.0206 9H11.0206C10.225 9 9.46192 9.31607 8.89931 9.87868C8.3367 10.4413 8.02063 11.2044 8.02063 12V16C8.02063 16.7956 8.3367 17.5587 8.89931 18.1213C9.46192 18.6839 10.225 19 11.0206 19H19.0206C19.8163 19 20.5793 18.6839 21.142 18.1213C21.7046 17.5587 22.0206 16.7956 22.0206 16V12C22.0206 11.2044 21.7046 10.4413 21.142 9.87868C20.5793 9.31607 19.8163 9 19.0206 9"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Connect.displayName = "Connect";
+const ForwardRef = forwardRef(Connect);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Connect };