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

package/src/components/native/Transfer.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 Transfer = (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="M6.52057 2.5L8.02057 4M8.02057 4L6.52057 5.5M8.02057 4H6.02057C5.22492 4 4.46184 4.31581 3.89923 4.87842C3.33662 5.44103 3.02057 6.20435 3.02057 7M17.5206 21.5L16.0206 20M16.0206 20L17.5206 18.5M16.0206 20H18.0206C18.8162 20 19.5793 19.6837 20.1419 19.1211C20.7045 18.5585 21.0206 17.7956 21.0206 17M11.0206 10H5.02057C3.916 10 3.02057 10.8954 3.02057 12V18C3.02057 19.1046 3.916 20 5.02057 20H11.0206C12.1251 20 13.0206 19.1046 13.0206 18V12C13.0206 10.8954 12.1251 10 11.0206 10ZM11.0206 10V6C11.0206 5.46957 11.2313 4.96101 11.6064 4.58594C11.9815 4.21086 12.4901 4 13.0206 4H19.0206C19.551 4 20.0597 4.21086 20.4348 4.58594C20.8098 4.96101 21.0206 5.46957 21.0206 6V12C21.0206 12.5304 20.8098 13.039 20.4348 13.4141C20.0597 13.7891 19.551 14 19.0206 14H13.0206"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Transfer.displayName = "Transfer";
+const ForwardRef = forwardRef(Transfer);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Transfer };

package/src/components/native/Trash.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 Trash = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 18 18"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M6.40905 3.14221V0.868164H11.6311V3.14221M0.930054 3.14319H17.1111M13.9291 17.1321H4.10106L2.86206 3.13824H15.1671L13.9291 17.1321Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Trash.displayName = "Trash";
+const ForwardRef = forwardRef(Trash);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Trash };

package/src/components/native/Trial.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 Trial = (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.8 21.0002L12 19.8002M12 19.8002L10.8 18.6002M12 19.8002C7.029 19.8002 3 18.2332 3 16.3002C3 15.4686 3.75298 14.7087 5.00295 14.1107M15.35 19.5472C18.66 19.0302 21 17.7722 21 16.3002C21 15.4686 20.2471 14.7088 18.9972 14.1108M12 5.28613C12.5357 4.68189 13.4624 4.00342 14.8735 4.00342C17.3419 4.00342 18.9971 6.23749 18.9971 8.31787C18.9971 12.6668 13.3823 15.9984 12 15.9984C10.6177 15.9984 5.00292 12.6668 5.00292 8.31787C5.00292 6.23749 6.65812 4.00342 9.12654 4.00342C10.5376 4.00342 11.4643 4.68189 12 5.28613Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Trial.displayName = "Trial";
+const ForwardRef = forwardRef(Trial);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Trial };

package/src/components/native/TrialUser.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 TrialUser = (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 15V14.35C17 12.776 15.724 11.5 14.15 11.5H9.85C8.27599 11.5 7 12.776 7 14.35V15M10.667 21L12 19.667L10.667 18.334M3.01825 14C2.43156 14.3992 2.05718 15.0426 2 15.75C2 17.9481 6.43372 19.7307 11.9186 19.7483M20.9818 14C21.5684 14.3992 21.9428 15.0426 22 15.75C22 17.541 19.0568 19.0565 15 19.5664M15 6C15 7.65685 13.6569 9 12 9C10.3431 9 9 7.65685 9 6C9 4.34315 10.3431 3 12 3C13.6569 3 15 4.34315 15 6Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+TrialUser.displayName = "TrialUser";
+const ForwardRef = forwardRef(TrialUser);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as TrialUser };

package/src/components/native/Unlink.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 Unlink = (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="M16.9698 12.7074L19.7989 9.87939C20.1703 9.50796 20.465 9.06698 20.666 8.58167C20.867 8.09635 20.9705 7.57621 20.9705 7.0509C20.9705 6.5256 20.867 6.00546 20.666 5.52014C20.465 5.03483 20.1703 4.59385 19.7989 4.22241C19.4275 3.85096 18.9865 3.55632 18.5012 3.35529C18.0158 3.15425 17.4957 3.05078 16.9704 3.05078C16.4451 3.05078 15.9249 3.15425 15.4396 3.35529C14.9543 3.55632 14.5133 3.85096 14.1418 4.22241L11.3129 7.05139M7.07086 11.2934L4.24188 14.1224C3.492 14.8725 3.07074 15.8898 3.07074 16.9504C3.07074 18.0111 3.492 19.0283 4.24188 19.7784C4.61332 20.1498 5.0543 20.4445 5.53961 20.6456C6.02493 20.8466 6.54507 20.9501 7.07037 20.9501C7.59568 20.9501 8.11582 20.8466 8.60114 20.6456C9.08645 20.4445 9.52743 20.1498 9.89886 19.7784L12.7278 16.9504M5.65585 8.46542L3.53485 7.75842M8.48489 5.63638L7.77789 3.51538M18.3839 15.5364L20.5049 16.2434M15.5558 18.3644L16.2628 20.4854M9.19189 14.8294L14.8489 9.17242"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Unlink.displayName = "Unlink";
+const ForwardRef = forwardRef(Unlink);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Unlink };

package/src/components/native/UpArrowLine.tsx

@@ -0,0 +1,47 @@
+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 UpArrowLine = (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.90103 0.446582C8.40687 -0.148861 7.59323 -0.148861 7.09907 0.446582L2.09094 6.48065L2.08787 6.48452L0 9H16L13.9195 6.49321C13.9161 6.4891 13.9126 6.48476 13.9092 6.48065L8.90103 0.446582Z"
+        fill={color}
+      />
+    </Svg>
+  );
+};
+UpArrowLine.displayName = "UpArrowLine";
+const ForwardRef = forwardRef(UpArrowLine);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as UpArrowLine };

package/src/components/native/Vaccine.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 Vaccine = (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="M13.3506 8.24004L17.5106 4.08004M20.0306 6.60004L15.8806 10.76M10.9706 5.86004L18.2706 13.15M6.67063 17.45L3.02063 21.1M7.40063 12.35L8.86063 13.81M9.59063 10.16L11.0506 11.62M16.4706 3.04004L21.0206 7.59004M16.8656 11.748L10.3286 18.285C9.54763 19.066 8.28163 19.066 7.50063 18.285L5.89363 16.68C5.11263 15.899 5.11263 14.633 5.89363 13.852L12.4306 7.31504"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Vaccine.displayName = "Vaccine";
+const ForwardRef = forwardRef(Vaccine);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Vaccine };

package/src/components/native/VideoOff.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 VideoOff = (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="M3.26057 3.5L15.1606 20.5M13.2326 17.75H5.27057C4.02757 17.75 3.02057 16.743 3.02057 15.5V8.5M5.18257 6.25H13.1456C14.3886 6.25 15.3956 7.257 15.3956 8.5V15.5M15.3956 13.0972L19.1906 16.1512C19.9266 16.7442 21.0206 16.2202 21.0206 15.2752V8.72522C21.0206 7.78022 19.9266 7.25622 19.1906 7.84922L15.3956 10.9032"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+VideoOff.displayName = "VideoOff";
+const ForwardRef = forwardRef(VideoOff);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as VideoOff };

package/src/components/native/VideoOn.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 VideoOn = (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="M16.0206 10.2925L19.4958 8.15036C19.8044 7.96016 20.1916 7.95178 20.5081 8.12845C20.8245 8.30512 21.0206 8.63919 21.0206 9.00162V15.9984C21.0206 16.3609 20.8245 16.6949 20.5081 16.8716C20.1917 17.0482 19.8044 17.0399 19.4959 16.8497L16.0206 14.7075M6.02063 19H13.0206C14.6775 19 16.0206 17.6569 16.0206 16V9C16.0206 7.34315 14.6775 6 13.0206 6H6.02063C4.36378 6 3.02063 7.34315 3.02063 9V16C3.02063 17.6569 4.36378 19 6.02063 19Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+VideoOn.displayName = "VideoOn";
+const ForwardRef = forwardRef(VideoOn);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as VideoOn };

package/src/components/native/Virus.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 Virus = (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="M12.0205 5.99734V2.99609M12.0205 5.99734C8.70539 5.99734 6.01803 8.68481 6.01803 11.9999M12.0205 5.99734C15.3356 5.99734 18.023 8.68476 18.023 11.9998M10.5198 2.99609H13.5211M12.0205 18.0023V21.0036M12.0205 18.0023C15.3356 18.0023 18.023 15.3149 18.023 11.9998M12.0205 18.0023C8.70539 18.0023 6.01803 15.315 6.01803 11.9999M13.5211 21.0036H10.5198M16.2652 7.75508L18.3871 5.63319M17.3257 4.57175L19.4486 6.69463M7.77571 16.2446L5.65382 18.3665M6.71526 19.4279L4.59238 17.3051M18.023 11.9998H21.0242M6.01803 11.9999L3.01672 11.9998M21.0242 10.4992V13.5005M3.01672 13.5005V10.4992M16.2652 16.2446L18.3871 18.3665M19.4486 17.3051L17.3257 19.4279M7.77571 7.75508L5.65382 5.63319M4.59238 6.69463L6.71526 4.57175M14.0205 11.9998C14.0205 13.1044 13.125 13.9998 12.0205 13.9998C10.9159 13.9998 10.0205 13.1044 10.0205 11.9998C10.0205 10.8953 10.9159 9.99984 12.0205 9.99984C13.125 9.99984 14.0205 10.8953 14.0205 11.9998Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Virus.displayName = "Virus";
+const ForwardRef = forwardRef(Virus);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Virus };

package/src/components/native/Volleyball.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 Volleyball = (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 22V9M3.02063 9V22M3.02063 10H21.0206M21.0206 18H3.02063M7.52063 10V18M12.0206 10V18M16.5206 10V18M21.0206 14H3.02063M22.0206 22H20.0206M4.02063 22H2.02063M14.0206 5C14.0206 6.10457 13.1252 7 12.0206 7C10.9161 7 10.0206 6.10457 10.0206 5C10.0206 3.89543 10.9161 3 12.0206 3C13.1252 3 14.0206 3.89543 14.0206 5Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Volleyball.displayName = "Volleyball";
+const ForwardRef = forwardRef(Volleyball);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Volleyball };

package/src/components/native/Watermelon.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 Watermelon = (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="M12.7541 12.7325L13.4995 13.4779M10.3208 14.2981V15.3533M3.73635 16.6586C4.08817 16.3002 4.65331 16.2639 5.04811 16.5743C8.31462 19.2109 13.0437 18.9593 16.012 15.9909C18.9803 13.0225 19.2319 8.29332 16.5954 5.02671C16.2849 4.6319 16.3213 4.06675 16.6797 3.71492M3.73635 16.6586L3.31204 17.082C3.11077 17.2861 3.00546 17.566 3.02225 17.8522C3.03904 18.1384 3.17636 18.404 3.40012 18.5832C7.69887 22.0727 13.9393 21.7494 17.8545 17.8343C21.7696 13.9193 22.0933 7.67872 18.6042 3.37963C18.425 3.15585 18.1594 3.01853 17.8732 3.00174C17.587 2.98495 17.3071 3.09026 17.103 3.29154L16.6797 3.71492M3.73635 16.6586L16.6797 3.71492M14.3197 10.2991H15.3748"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Watermelon.displayName = "Watermelon";
+const ForwardRef = forwardRef(Watermelon);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Watermelon };

package/src/components/native/Youtube.tsx

@@ -0,0 +1,51 @@
+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 Youtube = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 32 32"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M31.3313 8.44657C30.9633 7.08998 29.8791 6.02172 28.5022 5.65916C26.0067 5.00026 16 5.00026 16 5.00026C16 5.00026 5.99333 5.00026 3.4978 5.65916C2.12102 6.02172 1.03665 7.08998 0.668678 8.44657C0 10.9053 0 16.0353 0 16.0353C0 16.0353 0 21.1652 0.668678 23.6242C1.03665 24.9806 2.12102 26.0489 3.4978 26.4116C5.99333 27.0703 16 27.0703 16 27.0703C16 27.0703 26.0067 27.0703 28.5022 26.4116C29.8791 26.0489 30.9633 24.9806 31.3313 23.6242C32 21.1652 32 16.0353 32 16.0353C32 16.0353 32 10.9053 31.3313 8.44657Z"
+        fill="#ED1D24"
+      />
+      <Path
+        d="M12.7266 20.6934L21.0902 16.036L12.7266 11.3781V20.6934Z"
+        fill="white"
+      />
+    </Svg>
+  );
+};
+Youtube.displayName = "Youtube";
+const ForwardRef = forwardRef(Youtube);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Youtube };