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

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@kivid/icons",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.15",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "exports": {
     "./web": {
@@ -31,6 +32,11 @@
       }
     }
   },
+  "publishConfig": {
+    "files": [
+      "dist"
+    ]
+  },
   "sideEffects": false,
   "dependencies": {},
   "devDependencies": {

package/src/components/native/Add.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 Add = (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 4.92896V19.0711M19.0917 12H4.94956"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Add.displayName = "Add";
+const ForwardRef = forwardRef(Add);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Add };

package/src/components/native/AddCircle.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 AddCircle = (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"
+      stroke={stroke}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+      color={color}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        d="M12.0138 7.67397L12.0138 16.3007M16.3286 11.9887L7.70186 11.9887M22.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>
+  );
+};
+AddCircle.displayName = "AddCircle";
+const ForwardRef = forwardRef(AddCircle);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as AddCircle };

package/src/components/native/AddRect.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 AddRect = (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.2816 9.54647V14.8809M14.9488 12.2137H9.61441M19.1486 18.8224H4.89261C4.59149 18.8224 4.29332 18.7632 4.01512 18.6479C3.73692 18.5327 3.48415 18.3638 3.27122 18.1509C3.0583 17.938 2.88939 17.6852 2.77415 17.407C2.65892 17.1288 2.59961 16.8306 2.59961 16.5295V7.47046C2.59961 7.16934 2.65892 6.87116 2.77415 6.59296C2.88939 6.31476 3.0583 6.06198 3.27122 5.84906C3.48415 5.63614 3.73692 5.46722 4.01512 5.35199C4.29332 5.23676 4.59149 5.17749 4.89261 5.17749H19.1486C19.7568 5.17749 20.34 5.41904 20.77 5.84906C21.2 6.27908 21.4416 6.86232 21.4416 7.47046V16.5295C21.4416 17.1376 21.2 17.7209 20.77 18.1509C20.34 18.5809 19.7568 18.8224 19.1486 18.8224Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+AddRect.displayName = "AddRect";
+const ForwardRef = forwardRef(AddRect);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as AddRect };

package/src/components/native/AddRectDot.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 AddRectDot = (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 10.5V19.5C19.0206 20.0304 18.8099 20.5392 18.4348 20.9143C18.0597 21.2894 17.551 21.5 17.0206 21.5H5.02057C4.49014 21.5 3.98143 21.2894 3.60635 20.9143C3.23128 20.5392 3.02057 20.0304 3.02057 19.5V5.5C3.02057 4.96957 3.23128 4.46101 3.60635 4.08594C3.98143 3.71086 4.49014 3.5 5.02057 3.5H13.0206M11.0186 10.0051V15.5001M8.27057 12.7529H13.7706M21.0206 4.5C21.0206 5.60457 20.1251 6.5 19.0206 6.5C17.916 6.5 17.0206 5.60457 17.0206 4.5C17.0206 3.39543 17.916 2.5 19.0206 2.5C20.1251 2.5 21.0206 3.39543 21.0206 4.5Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+AddRectDot.displayName = "AddRectDot";
+const ForwardRef = forwardRef(AddRectDot);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as AddRectDot };

package/src/components/native/Alert.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 Alert = (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.9555 7.091V13.091M11.9555 17.091V16.091M22.3955 12C22.3955 17.73 17.7505 22.375 12.0205 22.375C6.29055 22.375 1.64551 17.73 1.64551 12C1.64551 6.27005 6.29055 1.625 12.0205 1.625C17.7505 1.625 22.3955 6.27005 22.3955 12Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Alert.displayName = "Alert";
+const ForwardRef = forwardRef(Alert);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Alert };

package/src/components/native/AlertSimple.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 AlertSimple = (props: Props, ref: React.Ref<Svg>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill={color}
+      stroke={stroke}
+      width={size}
+      height={size}
+      color={color}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 18.25C11.3096 18.25 10.75 17.6904 10.75 17L10.75 16.3421C10.75 15.6518 11.3096 15.0921 12 15.0921C12.6904 15.0921 13.25 15.6518 13.25 16.3421L13.25 17C13.25 17.6904 12.6904 18.25 12 18.25ZM12 13.75C11.3096 13.75 10.75 13.1904 10.75 12.5L10.75 7C10.75 6.30964 11.3096 5.75 12 5.75C12.6904 5.75 13.25 6.30964 13.25 7L13.25 12.5C13.25 13.1904 12.6904 13.75 12 13.75Z"
+        fill={color}
+      />
+    </Svg>
+  );
+};
+AlertSimple.displayName = "AlertSimple";
+const ForwardRef = forwardRef(AlertSimple);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as AlertSimple };

package/src/components/native/Ambulance.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 Ambulance = (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="M15.1639 18.9999H5.99991M19.4999 18.9999H20.4999C21.3283 18.9999 21.9999 18.3283 21.9999 17.4999V14.6213C21.9999 14.2235 21.8419 13.842 21.5606 13.5607L19.9999 12M19.9999 12L18.4558 7.36754C18.1835 6.55086 17.4193 6 16.5584 6H3.99991M19.9999 12H15.6942C14.7165 12 13.8821 11.2932 13.7214 10.3288L12.9999 6M7.49991 12.5H10.4999M8.99991 14V11M1.99991 13H3.99991M2.9561 10H4.99991M14.9999 6V4.5C14.9999 3.94772 14.5522 3.5 13.9999 3.5H11.9999C11.4476 3.5 10.9999 3.94772 10.9999 4.5V6M17.4998 17C18.3387 17.0034 19.0871 17.5279 19.3766 18.3152C19.666 19.1025 19.4357 19.9869 18.7988 20.5329C18.162 21.0789 17.2528 21.1715 16.5189 20.7652C15.8722 20.4173 15.4777 19.7339 15.4999 18.9999C15.4999 17.8954 16.3953 17 17.4998 17ZM3.99981 17C4.83868 17.0034 5.58706 17.5279 5.87655 18.3152C6.16605 19.1025 5.93566 19.9869 5.29881 20.5329C4.66195 21.0789 3.75281 21.1715 3.01891 20.7652C2.37223 20.4173 1.9777 19.7339 1.99991 18.9999C1.99992 17.8954 2.8953 17 3.99981 17Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+Ambulance.displayName = "Ambulance";
+const ForwardRef = forwardRef(Ambulance);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Ambulance };

package/src/components/native/ArrowCurve.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 ArrowCurve = (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="M16.2387 4.00098L19.0847 6.87198L16.2387 9.74298M18.0937 6.87198H11.5847C10.2838 6.85929 9.00846 7.23346 7.92063 7.94696C6.8328 8.66047 5.98153 9.68114 5.47488 10.8794C4.96824 12.0776 4.82909 13.3994 5.07509 14.6769C5.32109 15.9543 5.94114 17.1299 6.85654 18.0543C7.77193 18.9787 8.94137 19.6103 10.2164 19.8688C11.4914 20.1273 12.8144 20.0011 14.0176 19.5062C15.2207 19.0113 16.2497 18.1701 16.9738 17.0893C17.698 16.0085 18.0846 14.7369 18.0847 13.436"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ArrowCurve.displayName = "ArrowCurve";
+const ForwardRef = forwardRef(ArrowCurve);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ArrowCurve };

package/src/components/native/ArrowDown.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 ArrowDown = (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.3206 13.1725L12.0206 19.4725L5.72064 13.1725M11.9907 18.2416V4.52759"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ArrowDown.displayName = "ArrowDown";
+const ForwardRef = forwardRef(ArrowDown);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ArrowDown };

package/src/components/native/ArrowExternalLink.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 ArrowExternalLink = (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="M16.9206 7.05L7.02063 16.95M9.97063 7L16.9206 7.049L16.9706 14"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ArrowExternalLink.displayName = "ArrowExternalLink";
+const ForwardRef = forwardRef(ArrowExternalLink);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ArrowExternalLink };

package/src/components/native/ArrowLeft.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 ArrowLeft = (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.8491 18.2999L4.54907 11.9999L10.8491 5.69995M5.77806 11.9669H19.4921"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ArrowLeft.displayName = "ArrowLeft";
+const ForwardRef = forwardRef(ArrowLeft);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ArrowLeft };

package/src/components/native/ArrowRight.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 ArrowRight = (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.1928 5.69995L19.4928 12L13.1928 18.3M18.2628 12.0319H4.54883"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ArrowRight.displayName = "ArrowRight";
+const ForwardRef = forwardRef(ArrowRight);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ArrowRight };

package/src/components/native/ArrowRightRect.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 ArrowRightRect = (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="M15.3166 11.9915H8.64463M11.9946 8.59545L15.3946 11.9955L11.9946 15.3954M19.1486 18.8224H4.89262C4.5915 18.8224 4.29334 18.7632 4.01514 18.6479C3.73694 18.5327 3.48416 18.3638 3.27124 18.1509C3.05832 17.938 2.8894 17.6852 2.77417 17.407C2.65894 17.1288 2.59962 16.8306 2.59962 16.5295V7.47046C2.59962 7.16934 2.65894 6.87116 2.77417 6.59296C2.8894 6.31476 3.05832 6.06198 3.27124 5.84906C3.48416 5.63614 3.73694 5.46722 4.01514 5.35199C4.29334 5.23676 4.5915 5.17749 4.89262 5.17749H19.1486C19.7568 5.17749 20.34 5.41904 20.77 5.84906C21.2 6.27908 21.4416 6.86232 21.4416 7.47046V16.5295C21.4416 17.1376 21.2 17.7209 20.77 18.1509C20.34 18.5809 19.7568 18.8224 19.1486 18.8224Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+ArrowRightRect.displayName = "ArrowRightRect";
+const ForwardRef = forwardRef(ArrowRightRect);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+
+MaybeCssInteropedComponent = cssInterop?.(ForwardRef, {
+  className: {
+    target: "style",
+    nativeStyleToProp: { width: true, height: true },
+  },
+});
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ArrowRightRect };