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

package/src/components/native/CardCheck.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 CardCheck = (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.0207 17C12.0207 18.3261 12.5475 19.598 13.4852 20.5356C14.4228 21.4733 15.6946 22 17.0207 22C18.3468 22.0007 19.6188 21.4746 20.5569 20.5374C21.4951 19.6001 22.0225 18.3285 22.0231 17.0024C22.0238 15.6764 21.4977 14.4045 20.5605 13.4663C19.6233 12.5282 18.3518 12.0007 17.0257 12C15.705 12.0188 14.4436 12.5516 13.5092 13.4851C12.5748 14.4186 12.0408 15.6793 12.0207 17ZM12.0207 17H4.02068C3.49025 17 2.98157 16.7894 2.60649 16.4143C2.23142 16.0392 2.02068 15.5304 2.02068 15V6C2.02068 5.46957 2.23142 4.96077 2.60649 4.58569C2.98157 4.21062 3.49025 4 4.02068 4H19.0207C19.5511 4 20.0598 4.21062 20.4349 4.58569C20.8099 4.96077 21.0207 5.46957 21.0207 6V14M2.02066 7.85201H21.0207M19.2426 15.8889L16.4646 18.667L14.7977 17"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+CardCheck.displayName = "CardCheck";
+const ForwardRef = forwardRef(CardCheck);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as CardCheck };

package/src/components/native/CardClose.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 CardClose = (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="M2.04114 7.85205H21.0411M21.0411 14V6C21.0411 5.46957 20.8304 4.96077 20.4553 4.58569C20.0802 4.21062 19.5716 4 19.0411 4H4.04114C3.5107 4 3.00203 4.21062 2.62695 4.58569C2.25188 4.96077 2.04114 5.46957 2.04114 6V15C2.04114 15.5304 2.25188 16.0392 2.62695 16.4143C3.00203 16.7894 3.5107 17 4.04114 17H12.0411M18.4551 15.5859L15.6271 18.4139M18.4551 18.4139L15.6271 15.5859M17.0411 21.9999C16.0522 21.9999 15.0856 21.7068 14.2633 21.1574C13.4411 20.608 12.8002 19.8269 12.4218 18.9132C12.0433 17.9996 11.9443 16.9945 12.1372 16.0246C12.3301 15.0547 12.8064 14.1635 13.5056 13.4643C14.2049 12.765 15.0958 12.289 16.0657 12.0961C17.0356 11.9032 18.041 12.0021 18.9546 12.3805C19.8682 12.759 20.6491 13.3998 21.1985 14.2221C21.7479 15.0443 22.0411 16.011 22.0411 16.9999C22.0411 18.326 21.5143 19.5979 20.5767 20.5356C19.639 21.4732 18.3672 21.9999 17.0411 21.9999Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+CardClose.displayName = "CardClose";
+const ForwardRef = forwardRef(CardClose);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as CardClose };

package/src/components/native/Cash.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 Cash = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 25 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M21.0206 12.9792V5.09424C21.0206 4.56381 20.8099 4.05525 20.4348 3.68018C20.0597 3.3051 19.5511 3.09424 19.0206 3.09424H4.02063C3.4902 3.09424 2.98152 3.3051 2.60645 3.68018C2.23137 4.05525 2.02063 4.56381 2.02063 5.09424V14.0942C2.02063 14.6247 2.23137 15.1335 2.60645 15.5085C2.98152 15.8836 3.4902 16.0942 4.02063 16.0942H12.2816M5.02061 13.0963H7.02061M16.0206 6.0963H18.0206M15.3946 13.9573C14.7758 13.9748 14.1728 14.1574 13.6482 14.4861C13.1235 14.8148 12.6961 15.2775 12.4103 15.8267C12.1245 16.3759 11.9907 16.9916 12.0226 17.6099C12.0544 18.2282 12.2509 18.8266 12.5916 19.3435C12.9324 19.8604 13.405 20.2768 13.9607 20.5498C14.5163 20.8228 15.1349 20.9425 15.7523 20.8962C16.3697 20.85 16.9635 20.6398 17.4724 20.2871C17.9812 19.9344 18.3866 19.4522 18.6466 18.8904M14.0206 9.5963C14.0206 10.977 12.9013 12.0963 11.5206 12.0963C10.1399 12.0963 9.02061 10.977 9.02061 9.5963C9.02061 8.21558 10.1399 7.0963 11.5206 7.0963C12.9013 7.0963 14.0206 8.21558 14.0206 9.5963ZM18.5416 18.9003C17.8535 18.9003 17.1809 18.6962 16.6087 18.3139C16.0366 17.9316 15.5907 17.3883 15.3274 16.7526C15.0641 16.1169 14.9953 15.4175 15.1295 14.7426C15.2637 14.0678 15.595 13.4477 16.0815 12.9611C16.5681 12.4746 17.188 12.1432 17.8629 12.009C18.5378 11.8747 19.2372 11.9437 19.8729 12.207C20.5086 12.4703 21.052 12.9164 21.4343 13.4885C21.8166 14.0606 22.0206 14.7333 22.0206 15.4213C22.0206 15.8782 21.9306 16.3305 21.7557 16.7526C21.5809 17.1747 21.3246 17.5582 21.0016 17.8813C20.6785 18.2044 20.295 18.4606 19.8729 18.6354C19.4508 18.8103 18.9985 18.9003 18.5416 18.9003Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Cash.displayName = "Cash";
+const ForwardRef = forwardRef(Cash);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Cash };

package/src/components/native/Cat.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 Cat = (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="M9.81318 17.1248C10.0532 17.3654 10.3792 17.5004 10.719 17.5C11.4265 17.5 12 16.9265 12 16.219M12 16.219C12 16.7371 12.3121 17.2042 12.7908 17.4025C13.2695 17.6007 13.8205 17.4911 14.1868 17.1248M12 16.219V14.5M17 12.8066L21 12.14M21 16L17 15.3333M7 12.8066L3 12.14M3 16L7 15.3333M8.31223 10.4142C8.86452 9.86191 9.75994 9.86191 10.3122 10.4142M13.6878 10.4142C14.2401 9.86191 15.1355 9.86191 15.6878 10.4142M15.0743 6.41929L17.4627 4.37284C17.9185 3.98228 18.56 3.89277 19.1053 4.14364C19.6506 4.39451 20 4.93985 20 5.54011V13C20 17.4183 16.4183 21 12 21C7.58172 21 4 17.4183 4 13V5.54011C4 4.93985 4.34941 4.39451 4.89473 4.14364C5.44005 3.89277 6.08151 3.98228 6.53733 4.37284L8.92568 6.41929C10.9149 5.716 13.0851 5.716 15.0743 6.41929Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Cat.displayName = "Cat";
+const ForwardRef = forwardRef(Cat);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Cat };

package/src/components/native/Cellphone.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 Cellphone = (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="M10.899 13.1423C9.79263 12.0459 8.8983 10.7545 8.26099 9.33325C8.2024 9.19468 8.18689 9.0418 8.21649 8.89429C8.2461 8.74678 8.31942 8.61133 8.42694 8.5061L9.24597 7.68823C9.4 7.5512 9.52478 7.38442 9.6128 7.198C9.70082 7.01157 9.75024 6.80928 9.75818 6.60327C9.76612 6.39726 9.73241 6.19191 9.659 5.99927C9.58559 5.80662 9.47396 5.63066 9.33094 5.48218L8.15699 4.30835C7.78193 3.93341 7.27331 3.72241 6.74298 3.72241C6.21266 3.72241 5.70404 3.93341 5.32898 4.30835L4.67694 4.96021C4.31169 5.33261 4.04326 5.78868 3.89508 6.28882C3.74691 6.78896 3.72352 7.31808 3.82697 7.82935C4.56131 10.8288 6.10413 13.569 8.2876 15.7527C10.4711 17.9363 13.2116 19.4795 16.2109 20.2141C16.7224 20.3176 17.2516 20.2941 17.7519 20.1458C18.2522 19.9974 18.7086 19.7286 19.081 19.363L19.733 18.7122C20.1079 18.3371 20.3185 17.8284 20.3185 17.2981C20.3185 16.7678 20.1079 16.2591 19.733 15.884L18.559 14.7102C18.2777 14.429 17.8962 14.2708 17.4985 14.2708C17.1007 14.2708 16.7193 14.429 16.438 14.7102L15.538 15.6101C15.433 15.7177 15.2979 15.7909 15.1506 15.8206C15.0032 15.8502 14.8504 15.8348 14.712 15.7761C13.2894 15.1408 11.9967 14.2479 10.899 13.1423Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Cellphone.displayName = "Cellphone";
+const ForwardRef = forwardRef(Cellphone);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Cellphone };

package/src/components/native/Chart.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 Chart = (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.37102 14.17V10.84C8.37102 10.38 8.00102 10.01 7.54102 10.01H5.87102C5.41102 10.01 5.04102 10.38 5.04102 10.84V14.07M8.38102 14.17V6.67C8.38102 6.21 8.75102 5.84 9.21102 5.84H10.881C11.341 5.84 11.711 6.21 11.711 6.67V14.17V8.75C11.711 8.29 12.081 7.92 12.541 7.92H14.211C14.671 7.92 15.041 8.29 15.041 8.75V14.06M15.041 14.17H5.04102M19.041 5V15C19.041 17.21 17.251 19 15.041 19H5.04102C2.83102 19 1.04102 17.21 1.04102 15V5C1.04102 2.79 2.83102 1 5.04102 1H15.041C17.251 1 19.041 2.79 19.041 5Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Chart.displayName = "Chart";
+const ForwardRef = forwardRef(Chart);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Chart };

package/src/components/native/ChatboxEllipses.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 ChatboxEllipses = (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="M17.5746 9.25687H10.8266M8.7666 9.25687H6.58161M6.58161 13.6769H12.2176M14.7566 13.6769H17.5746M21.5256 11.3809C21.5256 12.1809 21.5256 13.2649 21.5256 14.0599V14.9529C21.524 15.6029 21.3318 16.2381 20.9727 16.7798C20.6137 17.3216 20.1036 17.7462 19.5056 18.0009C18.6191 18.2643 17.6899 18.3526 16.7696 18.2609H14.3546L13.0296 19.3829L12.5006 19.8319C12.4006 19.8949 12.2106 20.1319 12.0806 20.1209C11.9516 20.1339 11.7576 19.8949 11.6606 19.8319L9.80762 18.2609L6.67863 18.2339H6.15662C5.71033 18.2593 5.26353 18.1935 4.84353 18.0405C4.42353 17.8874 4.03913 17.6503 3.71381 17.3438C3.3885 17.0372 3.12911 16.6675 2.95147 16.2572C2.77383 15.847 2.68167 15.4049 2.68063 14.9579C2.68063 14.5109 2.68063 13.6179 2.68063 13.1719C2.68063 11.7399 2.68063 10.1379 2.68063 8.70592V7.81091C2.68561 6.93538 3.03563 6.09712 3.65473 5.47801C4.27384 4.85891 5.11209 4.50889 5.98762 4.50391C6.37962 4.50391 7.16463 4.50391 7.55563 4.50391H18.2196C18.9246 4.50609 19.6106 4.73244 20.1785 5.15021C20.7464 5.56798 21.1667 6.15553 21.3786 6.82791C21.5405 7.74178 21.5905 8.67196 21.5276 9.59792L21.5256 11.3809Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ChatboxEllipses.displayName = "ChatboxEllipses";
+const ForwardRef = forwardRef(ChatboxEllipses);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ChatboxEllipses };

package/src/components/native/ChatbubbleEllipses.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 ChatbubbleEllipses = (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="M10.1356 11.225H14.0356M8.53662 14.921H15.6366M7.83963 7.52901H16.3396M17.3946 19.657H6.15962L4.34163 21.075C4.22341 21.1697 4.08074 21.2288 3.93022 21.2456C3.7797 21.2624 3.62751 21.2361 3.49135 21.1698C3.35518 21.1035 3.24064 20.9999 3.16103 20.8711C3.08141 20.7422 3.04002 20.5935 3.04164 20.442V6.66902C3.04164 5.71239 3.42165 4.79493 4.0981 4.11848C4.77454 3.44204 5.692 3.06201 6.64864 3.06201H17.3906C17.8643 3.06201 18.3334 3.15531 18.771 3.33658C19.2086 3.51785 19.6062 3.78354 19.9412 4.11848C20.2761 4.45343 20.5418 4.85106 20.7231 5.28868C20.9043 5.7263 20.9976 6.19534 20.9976 6.66902V16.049C20.9979 17.0051 20.6186 17.9222 19.9429 18.5988C19.2673 19.2753 18.3508 19.656 17.3946 19.657Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ChatbubbleEllipses.displayName = "ChatbubbleEllipses";
+const ForwardRef = forwardRef(ChatbubbleEllipses);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ChatbubbleEllipses };

package/src/components/native/Check.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 Check = (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="M19.0206 7L9.42863 17L5.02063 12.4"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Check.displayName = "Check";
+const ForwardRef = forwardRef(Check);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Check };

package/src/components/native/CheckCircle.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 CheckCircle = (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="M17.0366 9.39603L11.2766 15.156L8.62958 12.5091M22.3466 12.0001C22.3466 17.703 17.7235 22.3261 12.0206 22.3261C6.31769 22.3261 1.69458 17.703 1.69458 12.0001C1.69458 6.29718 6.31769 1.67407 12.0206 1.67407C17.7235 1.67407 22.3466 6.29718 22.3466 12.0001Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+CheckCircle.displayName = "CheckCircle";
+const ForwardRef = forwardRef(CheckCircle);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as CheckCircle };

package/src/components/native/ChevronDown.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 ChevronDown = (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="M18.5706 9.08203L12.0206 14.918L5.47058 9.08203"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ChevronDown.displayName = "ChevronDown";
+const ForwardRef = forwardRef(ChevronDown);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ChevronDown };

package/src/components/native/ChevronLeft.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 ChevronLeft = (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="M14.9386 5.44995L9.10263 11.9999L14.9386 18.5499"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ChevronLeft.displayName = "ChevronLeft";
+const ForwardRef = forwardRef(ChevronLeft);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ChevronLeft };

package/src/components/native/ChevronRight.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 ChevronRight = (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="M9.10263 5.44995L14.9386 11.9999L9.10263 18.5499"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ChevronRight.displayName = "ChevronRight";
+const ForwardRef = forwardRef(ChevronRight);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ChevronRight };