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

package/src/components/web/GradientDocLab200BasicPink.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const GradientDocLab200BasicPink = (
+  props: Props,
+  ref: React.Ref<SVGSVGElement>
+) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 48 48"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M39.0029 15V9C39.0029 7.93913 38.5814 6.92007 37.8313 6.16992C37.0812 5.41978 36.0638 5 35.0029 5H9.00293C7.94206 5 6.92471 5.41978 6.17456 6.16992C5.42442 6.92007 5.00293 7.93913 5.00293 9V37C5.00293 38.0609 5.42442 39.078 6.17456 39.8281C6.92471 40.5783 7.94206 41 9.00293 41H19.0029M13.0029 29H17.0029M13.0029 21H21.0029M13.0029 13H31.0029M38.7048 21H29.7048M37.2049 21V28.5605L42.3909 36.8809C42.7692 37.4869 42.9783 38.1843 42.9964 38.8984C43.0145 39.6126 42.8412 40.317 42.4942 40.9414C42.1472 41.5659 41.6391 42.0875 41.023 42.4492C40.407 42.8109 39.7054 43.0012 38.991 43H29.4071C28.6927 43.0012 27.9909 42.8109 27.3748 42.4492C26.7588 42.0875 26.2509 41.5659 25.9039 40.9414C25.5569 40.317 25.3833 39.6126 25.4014 38.8984C25.4196 38.1843 25.6286 37.4869 26.0069 36.8809L31.1929 28.5605V21M37.4769 29H30.9329"
+        stroke="url(#10-paint0_linear_4874_32353)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id="10-paint0_linear_4874_32353"
+          x1={5.02413}
+          y1={43}
+          x2={50.7382}
+          y2={26.6744}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#9573E5" />
+          <stop offset={1} stopColor="#F39ECF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+GradientDocLab200BasicPink.displayName = "GradientDocLab200BasicPink";
+const ForwardRef = forwardRef(GradientDocLab200BasicPink);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as GradientDocLab200BasicPink };

package/src/components/web/HandHeart.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const HandHeart = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 25 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M19.0206 15.5V11.5C19.0206 10.67 19.6906 10 20.5206 10C21.3506 10 22.0206 10.67 22.0206 11.5V18.06C22.0206 18.68 21.8806 19.29 21.6006 19.85L21.0206 21.01M14.0206 21V18.09C14.0206 17.66 14.1606 17.24 14.4206 16.89L16.1006 14.65C16.6906 13.86 17.8506 13.78 18.5506 14.48C19.1206 15.05 19.1906 15.96 18.7006 16.6L17.6506 18M5.02063 15.5V11.5C5.02063 10.67 4.35063 10 3.52063 10C2.69063 10 2.02063 10.67 2.02063 11.5V18.06C2.02063 18.68 2.16063 19.29 2.44063 19.85L3.02063 21.01M10.0206 21V18.09C10.0206 17.66 9.88063 17.24 9.62063 16.89L7.94063 14.65C7.35063 13.86 6.19063 13.78 5.49063 14.48C4.92063 15.05 4.85063 15.96 5.34063 16.6L6.39063 18M13.5806 10.36C13.1706 10.77 12.6106 11 12.0206 11C11.4406 11 10.8806 10.77 10.4606 10.36L7.83063 7.72C6.75063 6.64 6.75063 4.89 7.83063 3.81C8.91063 2.73 10.6606 2.73 11.7406 3.81L12.0206 4.09L12.3006 3.81C13.3806 2.73 15.1306 2.73 16.2106 3.81C17.2906 4.89 17.2906 6.64 16.2106 7.72L13.5706 10.36H13.5806Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+HandHeart.displayName = "HandHeart";
+const ForwardRef = forwardRef(HandHeart);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as HandHeart };

package/src/components/web/Happy.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const Happy = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M6.5 8V7M13.5 7V8M13 12C13 13.657 11.657 15 10 15C8.343 15 7 13.657 7 12H13ZM10 1C5.037 1 1 5.037 1 10C1 14.963 5.037 19 10 19C14.963 19 19 14.962 19 10C19 5.038 14.962 1 10 1Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Happy.displayName = "Happy";
+const ForwardRef = forwardRef(Happy);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Happy };

package/src/components/web/Headset.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const Headset = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 25 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M18.0206 16.875H19.0206C19.5511 16.875 20.0598 16.6643 20.4348 16.2892C20.8099 15.9141 21.0206 15.4054 21.0206 14.875V11.875C21.0206 11.3446 20.8099 10.8359 20.4348 10.4608C20.0598 10.0857 19.5511 9.875 19.0206 9.875H18.0206C17.7554 9.875 17.5011 9.98036 17.3135 10.1679C17.126 10.3554 17.0206 10.6098 17.0206 10.875V15.875C17.0206 16.1402 17.126 16.3946 17.3135 16.5821C17.5011 16.7696 17.7554 16.875 18.0206 16.875ZM18.0206 16.875V17.875C18.0206 18.4054 17.8099 18.914 17.4348 19.2891C17.0598 19.6641 16.5511 19.875 16.0206 19.875H13.8956M18.5206 9.875V9.375C18.5206 7.65109 17.8358 5.9978 16.6168 4.77881C15.3978 3.55982 13.7445 2.875 12.0206 2.875C10.2967 2.875 8.64342 3.55982 7.42444 4.77881C6.20545 5.9978 5.52063 7.65109 5.52063 9.375V9.875M13.8956 19.875C13.8956 19.1846 13.336 18.625 12.6456 18.625H11.3956C10.7053 18.625 10.1456 19.1846 10.1456 19.875C10.1456 20.5654 10.7053 21.125 11.3956 21.125H12.6456C13.336 21.125 13.8956 20.5654 13.8956 19.875ZM5.02063 9.875H6.02063C6.28585 9.875 6.5402 9.98036 6.72774 10.1679C6.91527 10.3554 7.02063 10.6098 7.02063 10.875V15.875C7.02063 16.1402 6.91527 16.3946 6.72774 16.5821C6.5402 16.7696 6.28585 16.875 6.02063 16.875H5.02063C4.4902 16.875 3.98149 16.6643 3.60642 16.2892C3.23134 15.9141 3.02063 15.4054 3.02063 14.875V11.875C3.02063 11.3446 3.23134 10.8359 3.60642 10.4608C3.98149 10.0857 4.4902 9.875 5.02063 9.875Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Headset.displayName = "Headset";
+const ForwardRef = forwardRef(Headset);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Headset };

package/src/components/web/HealthCircle.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const HealthCircle = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 25 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M12.0206 21C9.63362 21 7.34438 20.0518 5.65656 18.364C3.96873 16.6762 3.02057 14.3869 3.02057 12C3.02057 9.61305 3.96873 7.32381 5.65656 5.63599C7.34438 3.94816 9.63362 3 12.0206 3C14.4075 3 16.6966 3.94816 18.3845 5.63599C20.0723 7.32381 21.0206 9.61305 21.0206 12C21.0206 14.3869 20.0723 16.6762 18.3845 18.364C16.6966 20.0518 14.4075 21 12.0206 21Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.0215 10.1938H13.8345V8.01196C13.8345 7.74675 13.7292 7.49247 13.5417 7.30493C13.3542 7.1174 13.0998 7.01196 12.8345 7.01196H11.1985C10.9333 7.01196 10.6789 7.1174 10.4914 7.30493C10.3039 7.49247 10.1985 7.74675 10.1985 8.01196V10.1938H8.01654C7.75132 10.1938 7.49705 10.2993 7.30951 10.4868C7.12197 10.6744 7.01654 10.9286 7.01654 11.1938V12.8298C7.01654 13.0951 7.12197 13.3496 7.30951 13.5371C7.49705 13.7246 7.75132 13.8298 8.01654 13.8298H10.1985V16.012C10.1985 16.2772 10.3039 16.5315 10.4914 16.719C10.6789 16.9065 10.9333 17.012 11.1985 17.012H12.8345C13.0998 17.012 13.3542 16.9065 13.5417 16.719C13.7292 16.5315 13.8345 16.2772 13.8345 16.012V13.8298H16.0165C16.2818 13.8298 16.5362 13.7246 16.7237 13.5371C16.9112 13.3496 17.0165 13.0951 17.0165 12.8298V11.1938C17.0165 10.9295 16.9119 10.6759 16.7254 10.4885C16.5389 10.3011 16.2859 10.1952 16.0215 10.1938Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+HealthCircle.displayName = "HealthCircle";
+const ForwardRef = forwardRef(HealthCircle);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as HealthCircle };

package/src/components/web/Heart.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const Heart = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 22 20"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M15.1305 1.0002C18.6535 1.0002 21.0205 4.35265 21.0205 7.47951C21.0205 13.8158 11.1979 19 11.0196 19C10.8413 19 1.02051 13.8158 1.02051 7.47951C1.02051 4.35361 3.3913 1.0002 6.92093 1.0002C7.70186 0.994285 8.4744 1.16336 9.18317 1.49532C9.89194 1.82728 10.5194 2.31391 11.0205 2.92028C11.5232 2.31304 12.1524 1.82596 12.863 1.49399C13.5736 1.16202 14.3479 0.993392 15.1305 1.0002Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Heart.displayName = "Heart";
+const ForwardRef = forwardRef(Heart);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Heart };

package/src/components/web/HeartCheck.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const HeartCheck = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 18"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M12.9096 7.05566L9.29858 10.667L7.13159 8.5M10.0206 2.71118C10.4718 2.16936 11.0378 1.73466 11.6778 1.43872C12.3178 1.14278 13.0155 0.993087 13.7206 1.00025C16.8946 1.00025 19.0206 3.98013 19.0206 6.75513C19.0206 12.5551 11.7986 17.0002 10.0206 17.0002C8.24263 17.0002 1.02063 12.5561 1.02063 6.75513C1.02063 3.98113 3.15062 1.00025 6.32062 1.00025C7.02565 0.993087 7.72344 1.14278 8.3634 1.43872C9.00336 1.73466 9.56946 2.16936 10.0206 2.71118Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+HeartCheck.displayName = "HeartCheck";
+const ForwardRef = forwardRef(HeartCheck);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as HeartCheck };

package/src/components/web/HelpBalloon.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const HelpBalloon = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M5.02063 19H15.0206M10.0206 11V11.2M8.09863 5.452C8.19752 5.0257 8.44219 4.64732 8.79037 4.38222C9.13855 4.11711 9.56838 3.98192 10.0056 4C10.4905 3.97346 10.9663 4.13969 11.3291 4.46245C11.6919 4.78521 11.9125 5.23832 11.9426 5.723C11.9426 7.023 10.0916 7.446 10.0916 8.307M7.20863 13L9.12063 15.55C9.22542 15.6897 9.3613 15.8031 9.51751 15.8812C9.67373 15.9593 9.84598 16 10.0206 16C10.1953 16 10.3675 15.9593 10.5237 15.8812C10.68 15.8031 10.8158 15.6897 10.9206 15.55L12.8326 13H16.0206C16.8163 13 17.5793 12.6839 18.142 12.1213C18.7046 11.5587 19.0206 10.7956 19.0206 10V4C19.0206 3.20435 18.7046 2.44129 18.142 1.87868C17.5793 1.31607 16.8163 1 16.0206 1H4.02063C3.22498 1 2.46192 1.31607 1.89931 1.87868C1.3367 2.44129 1.02063 3.20435 1.02063 4V10C1.02063 10.7956 1.3367 11.5587 1.89931 12.1213C2.46192 12.6839 3.22498 13 4.02063 13H7.20863Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+HelpBalloon.displayName = "HelpBalloon";
+const ForwardRef = forwardRef(HelpBalloon);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as HelpBalloon };

package/src/components/web/HelpCircle.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const HelpCircle = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 22 22"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M11.0226 1.11133C8.39897 1.11793 5.88472 2.16289 4.02954 4.01807C2.17436 5.87325 1.12916 8.38762 1.12256 11.0112C1.12598 13.1511 1.82826 15.231 3.12256 16.9351C4.13408 18.2835 5.47355 19.3513 7.01374 20.0363C8.55392 20.7213 10.2436 21.0007 11.9224 20.8488C13.6012 20.6969 15.2133 20.1184 16.6055 19.1681C17.9978 18.2178 19.1239 16.9276 19.877 15.4196C20.6301 13.9115 20.9851 12.2358 20.9083 10.5519C20.8315 8.86801 20.3254 7.23175 19.4382 5.79848C18.551 4.36522 17.3121 3.18259 15.8392 2.36294C14.3662 1.54328 12.7082 1.11385 11.0226 1.11538M11.0835 12.2307V11.966C11.0959 11.6141 11.2047 11.2719 11.3986 10.9743C11.5925 10.6767 11.8646 10.4343 12.1869 10.2726C12.5023 10.114 12.7686 9.8767 12.9584 9.58514C13.1481 9.29359 13.2545 8.95861 13.2666 8.61395C13.2542 8.06033 13.0189 7.53347 12.6111 7.14618C12.2034 6.75889 11.6555 6.54169 11.085 6.54169C10.5145 6.54169 9.96672 6.75889 9.55895 7.14618C9.15118 7.53347 8.91588 8.06033 8.90348 8.61395M11.0846 15.0002V15.5002"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+HelpCircle.displayName = "HelpCircle";
+const ForwardRef = forwardRef(HelpCircle);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as HelpCircle };

package/src/components/web/Home.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const Home = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.8626 1.63208L17.8626 6.29907C18.5936 6.86743 19.0206 7.74146 19.0206 8.66724V16.0002C19.0206 17.6575 17.6776 19.0002 16.0206 19.0002H13.0206V12.0002C13.0206 10.8958 12.1251 10.0002 11.0206 10.0002H9.02057C7.91608 10.0002 7.02057 10.8958 7.02057 12.0002V19.0002H4.02057C2.36359 19.0002 1.02057 17.6575 1.02057 16.0002V8.66724C1.02057 7.74146 1.44757 6.86743 2.17853 6.29907L8.17853 1.63208C9.26251 0.789307 10.7796 0.789307 11.8626 1.63208Z"
+        stroke={color}
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Home.displayName = "Home";
+const ForwardRef = forwardRef(Home);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Home };

package/src/components/web/Image.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const Image = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 25 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M21.0205 8L14.0205 15M21.0205 8V16C21.0205 18.7614 18.7819 21 16.0205 21H8.02051C5.25908 21 3.02051 18.7614 3.02051 16M21.0205 8C21.0205 5.23858 18.7819 3 16.0205 3H8.02051C5.25908 3 3.02051 5.23858 3.02051 8V16M19.0205 20L10.4347 11.4142C9.65367 10.6332 8.38735 10.6332 7.6063 11.4142L3.02051 16M14.2705 7.5H15.0205M14.2705 8H15.0205"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Image.displayName = "Image";
+const ForwardRef = forwardRef(Image);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Image };

package/src/components/web/ImageError.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const ImageError = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 21 21"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M19.0206 12V16C19.0206 18.2091 17.2298 20 15.0206 20H5.02063C2.81149 20 1.02063 18.2091 1.02063 16V5.99999C1.02063 3.79085 2.81149 1.99999 5.02063 1.99999H9.02063M15.1367 5.88387L16.9045 4.11611M16.9045 5.88387L15.1367 4.11611M1.02063 12.0013L2.31579 10.7062C2.76794 10.254 3.38119 10 4.02062 10C4.66006 10 5.27331 10.254 5.72546 10.7062L10.0206 15.0013M5.02496 20L11.3188 13.7062C12.2604 12.7646 13.7869 12.7646 14.7285 13.7062L18.6676 17.6453M20.0206 5C20.0206 7.20914 18.2298 9 16.0206 9C13.8115 9 12.0206 7.20914 12.0206 5C12.0206 2.79086 13.8115 1 16.0206 1C18.2298 1 20.0206 2.79086 20.0206 5Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+ImageError.displayName = "ImageError";
+const ForwardRef = forwardRef(ImageError);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ImageError };

package/src/components/web/Infomation.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const Infomation = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M9.02044 13.5001H11.3298M10.1708 13.5V9.25H9.02084M10.0205 7.0029V6.00155M19.0206 10C19.0206 14.9706 14.9912 19 10.0206 19C5.05007 19 1.02063 14.9706 1.02063 10C1.02063 5.02944 5.05007 1 10.0206 1C14.9912 1 19.0206 5.02944 19.0206 10Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Infomation.displayName = "Infomation";
+const ForwardRef = forwardRef(Infomation);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Infomation };

package/src/components/web/Invite.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const Invite = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M4.30624 5.79352L1.7569 8.14209C1.3055 8.55828 1.35978 9.2859 1.86736 9.63066L8.95448 14.4335C9.60015 14.8707 10.4477 14.8707 11.0934 14.4335L18.1738 9.63447C18.6843 9.28875 18.7366 8.55637 18.2805 8.14209L15.734 5.8278M1.44922 8.80966V17.5954C1.44922 18.1344 1.87586 18.5716 2.40153 18.5716H17.6385C18.1642 18.5716 18.5909 18.1344 18.5909 17.5954V8.80966M1.73491 18.2859L6.94407 13.0763M13.0961 13.0763L18.3053 18.2858M15.7339 11.2173V2.38109C15.7339 1.85538 15.3073 1.42871 14.7816 1.42871H5.25847C4.7328 1.42871 4.30616 1.85538 4.30616 2.38109V11.2173M6.87294 10.7181V10.3712C6.87576 9.38441 7.67498 8.58513 8.66174 8.58231H11.491C12.4778 8.58513 13.277 9.38441 13.2798 10.3712V10.7181M8.36795 5.10854C8.37174 4.16579 9.13832 3.40425 10.081 3.40675C11.0237 3.40927 11.7862 4.17489 11.785 5.11765C11.7837 6.0604 11.0192 6.824 10.0765 6.824C9.62216 6.824 9.18656 6.64305 8.86595 6.32114C8.54535 5.99923 8.36615 5.56288 8.36795 5.10854Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Invite.displayName = "Invite";
+const ForwardRef = forwardRef(Invite);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Invite };

package/src/components/web/InviteGroup.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const InviteGroup = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 25 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M3.38104 9.84195V18.7671C3.38104 19.8279 4.24024 20.6871 5.30104 20.6871H18.7401C19.8009 20.6871 20.6601 19.8279 20.6601 18.7671V9.84195M9.25625 14.8119L3.94745 20.1207M20.0946 20.1207L14.7858 14.8119M6.26108 6.88419L4.23164 8.24931C3.10076 9.00963 3.10076 10.6743 4.23164 11.4355L9.87069 15.2295C11.1705 16.104 12.8697 16.104 14.1696 15.2295L19.8086 11.4355C20.9395 10.6743 20.9395 9.01059 19.8086 8.24931L17.7811 6.88419M17.7809 12.8007V4.27299C17.7809 3.74307 17.3508 3.31299 16.8209 3.31299H7.22093C6.69101 3.31299 6.26093 3.74307 6.26093 4.27299V12.8007M9.1413 6.76708H14.9013M9.1413 10.1271H14.9013"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+InviteGroup.displayName = "InviteGroup";
+const ForwardRef = forwardRef(InviteGroup);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as InviteGroup };