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

package/src/components/web/ReorderDown.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 ReorderDown = (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 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M12.0096 21V8M12.0096 21L14.0096 19M12.0096 21L10.0096 19M15.0096 11H18.5096C19.8903 11 21.0096 12.1193 21.0096 13.5C21.0096 14.8807 19.8903 16 18.5096 16H15.0096M9.00958 11H5.50958C4.12887 11 3.00958 12.1193 3.00958 13.5C3.00958 14.8807 4.12887 16 5.50958 16H9.00958M18.5096 3H5.50958C4.12887 3 3.00958 4.11929 3.00958 5.5C3.00958 6.88071 4.12887 8 5.50958 8H18.5096C19.8903 8 21.0096 6.88071 21.0096 5.5C21.0096 4.11929 19.8903 3 18.5096 3Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+ReorderDown.displayName = "ReorderDown";
+const ForwardRef = forwardRef(ReorderDown);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ReorderDown };

package/src/components/web/ReorderUp.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 ReorderUp = (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 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M12.0095 3V16M12.0095 3L10.0095 5M12.0095 3L14.0095 5M15.0095 13H18.5095C19.8902 13 21.0095 11.8807 21.0095 10.5C21.0095 9.11929 19.8902 8 18.5095 8H15.0095M9.00952 13H5.50952C4.12881 13 3.00952 11.8807 3.00952 10.5C3.00952 9.11929 4.12881 8 5.50952 8H9.00952M5.50952 21H18.5095C19.8902 21 21.0095 19.8807 21.0095 18.5C21.0095 17.1193 19.8902 16 18.5095 16H5.50952C4.12881 16 3.00952 17.1193 3.00952 18.5C3.00952 19.8807 4.12881 21 5.50952 21Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+ReorderUp.displayName = "ReorderUp";
+const ForwardRef = forwardRef(ReorderUp);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ReorderUp };

package/src/components/web/Result.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 Result = (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 18 22"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M5.02063 3L6.32056 1.37598C6.41419 1.25872 6.53302 1.16421 6.66821 1.09912C6.80341 1.03403 6.95151 1.00006 7.10156 1H10.9396C11.0896 1.00006 11.2377 1.03403 11.3729 1.09912C11.5081 1.16421 11.627 1.25872 11.7206 1.37598L13.0206 3M5.02063 3V4C5.02063 4.26522 5.12594 4.51949 5.31348 4.70703C5.50101 4.89457 5.75541 5 6.02063 5H12.0206C12.2858 5 12.5401 4.89457 12.7277 4.70703C12.9152 4.51949 13.0206 4.26522 13.0206 4V3M5.02063 3H3.02063C2.4902 3 1.98152 3.21086 1.60645 3.58594C1.23137 3.96101 1.02063 4.46957 1.02063 5V19C1.02063 19.5304 1.23137 20.039 1.60645 20.4141C1.98152 20.7891 2.4902 21 3.02063 21H15.0206C15.5511 21 16.0597 20.7891 16.4348 20.4141C16.8099 20.039 17.0206 19.5304 17.0206 19V5C17.0206 4.46957 16.8099 3.96101 16.4348 3.58594C16.0597 3.21086 15.5511 3 15.0206 3H13.0206M6.94924 8.33301L5.23597 10.1158L4.20821 9.04632M6.94924 12.6108L5.23597 14.3935L4.20821 13.3241M10.3748 17.6019H13.4581M10.3748 9.04633H13.4581M10.3748 13.3241H13.4581"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Result.displayName = "Result";
+const ForwardRef = forwardRef(Result);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Result };

package/src/components/web/Rocket.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 Rocket = (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 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M12.9401 11.0596L5.87014 18.1296M6.63314 12.9986L3.17014 12.1806C2.78914 12.0906 2.65514 11.6176 2.93114 11.3406L5.68514 8.58663C5.87014 8.40163 6.12114 8.29563 6.38414 8.29363L9.48914 8.26663M13.4001 4.71363C15.7111 6.28963 17.7101 8.28863 19.2861 10.5996M11.0001 17.3666L11.8181 20.8296C11.9081 21.2106 12.3811 21.3446 12.6581 21.0686L15.4121 18.3146C15.5971 18.1296 15.7031 17.8786 15.7051 17.6156L15.7321 14.5106M19.8791 8.97463L20.6871 5.08663C20.9071 4.02863 19.9711 3.09263 18.9131 3.31263L15.0251 4.12063C13.8801 4.35863 12.8301 4.92563 12.0041 5.75263L8.81414 8.94163C7.59714 10.1586 6.80514 11.7366 6.55514 13.4396L6.54414 13.5126C6.38614 14.5996 6.75014 15.6966 7.52614 16.4736C8.30214 17.2496 9.40014 17.6136 10.4871 17.4546L10.5601 17.4436C12.2631 17.1946 13.8411 16.4016 15.0581 15.1846L18.2471 11.9956C19.0741 11.1696 19.6411 10.1196 19.8791 8.97463Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Rocket.displayName = "Rocket";
+const ForwardRef = forwardRef(Rocket);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Rocket };

package/src/components/web/Sad.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 Sad = (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="M8.51038 9V10M15.5104 9V10M8.51038 16C8.51038 16 9.82338 14.688 12.0104 14.688C14.1984 14.688 15.5104 16 15.5104 16M18.3744 5.63604C21.8891 9.15076 21.8891 14.8492 18.3744 18.3639C14.8597 21.8787 9.16118 21.8787 5.64648 18.3639C2.13176 14.8492 2.13176 9.15074 5.64648 5.63604C9.1612 2.12132 14.8597 2.12132 18.3744 5.63604Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Sad.displayName = "Sad";
+const ForwardRef = forwardRef(Sad);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Sad };

package/src/components/web/SealCertified.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 SealCertified = (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="M14.823 10.6001L11.323 14.1001L9.21597 12.0001M3.51589 13.4652L4.71089 15.0292L4.96889 16.9762C5.03832 17.5015 5.27891 17.9894 5.65344 18.3643C6.02798 18.7392 6.51559 18.9802 7.04088 19.0501L8.99288 19.3112L10.5549 20.5002C10.9754 20.8217 11.49 20.9959 12.0194 20.9959C12.5487 20.9959 13.0634 20.8217 13.4839 20.5002L15.0479 19.3052L16.9959 19.0472C17.5212 18.9777 18.0091 18.7371 18.384 18.3626C18.7589 17.9881 18.9999 17.5004 19.0699 16.9752L19.3299 15.0231L20.5249 13.4601C20.8463 13.0396 21.0204 12.525 21.0204 11.9956C21.0204 11.4663 20.8463 10.9517 20.5249 10.5312L19.3299 8.97115L19.0719 7.02415C19.0025 6.49879 18.7619 6.01094 18.3873 5.63605C18.0128 5.26115 17.5252 5.02009 16.9999 4.95015L15.0469 4.69015L13.4839 3.50015C13.0634 3.17861 12.5487 3.00439 12.0194 3.00439C11.49 3.00439 10.9754 3.17861 10.5549 3.50015L8.99088 4.69015L7.04289 4.94915C6.51753 5.01859 6.02968 5.25917 5.65478 5.63371C5.27989 6.00824 5.03883 6.49586 4.96889 7.02115L4.70788 8.97315L3.51589 10.5362C3.19482 10.9569 3.0209 11.4714 3.0209 12.0007C3.0209 12.5299 3.19482 13.0444 3.51589 13.4652Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+SealCertified.displayName = "SealCertified";
+const ForwardRef = forwardRef(SealCertified);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as SealCertified };

package/src/components/web/Search.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 Search = (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="M20.8201 20.6778L16.3501 16.2078M10.7951 18.4698C9.45683 18.4698 8.14247 18.1152 6.98579 17.4421C5.82912 16.769 4.87142 15.8015 4.2102 14.638C3.54899 13.4745 3.20786 12.1566 3.22153 10.8184C3.2352 9.48023 3.60317 8.16956 4.28802 7.01981C4.97287 5.87007 5.95013 4.92231 7.12031 4.273C8.2905 3.6237 9.61184 3.29603 10.9498 3.32336C12.2878 3.35069 13.5946 3.73205 14.7373 4.4286C15.88 5.12515 16.8178 6.11203 17.4551 7.28878C18.0698 8.44378 18.3763 9.73783 18.3449 11.0459C18.3134 12.3539 17.9451 13.6317 17.2755 14.7558C16.6059 15.8799 15.6577 16.8124 14.5225 17.4629C13.3873 18.1135 12.1035 18.4603 10.7951 18.4698Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Search.displayName = "Search";
+const ForwardRef = forwardRef(Search);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Search };

package/src/components/web/SearchHeart.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 SearchHeart = (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.3135 21.293L17.5345 17.514M20.0755 11.381C20.0755 16.1715 16.1921 20.055 11.4015 20.055C6.61102 20.055 2.72754 16.1715 2.72754 11.381C2.72754 6.59051 6.61102 2.70703 11.4015 2.70703C16.1921 2.70703 20.0755 6.59051 20.0755 11.381ZM11.4985 8.35741C11.7548 8.06478 12.0715 7.831 12.4268 7.67284C12.7822 7.51468 13.1676 7.4359 13.5565 7.44139C14.3539 7.47153 15.1083 7.81087 15.6597 8.38768C16.2111 8.96449 16.5163 9.73328 16.5105 10.5312C16.5105 13.6462 12.4885 16.0312 11.4975 16.0312C10.5065 16.0312 6.48453 13.6462 6.48453 10.5312C6.47877 9.73311 6.78406 8.96452 7.3357 8.38768C7.88733 7.81085 8.64193 7.47127 9.43952 7.44139C9.82858 7.43589 10.2142 7.51469 10.5697 7.67284C10.9252 7.83099 11.2421 8.06475 11.4985 8.35741Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+SearchHeart.displayName = "SearchHeart";
+const ForwardRef = forwardRef(SearchHeart);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as SearchHeart };

package/src/components/web/Security.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 Security = (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="M20.4164 11.1414C20.3554 13.5463 19.4973 15.863 17.9769 17.7274C16.4565 19.5917 14.3599 20.8978 12.0164 21.4412C9.67296 20.8978 7.57638 19.5917 6.05597 17.7274C4.53556 15.863 3.67747 13.5463 3.61646 11.1414V7.01154C3.61619 6.59529 3.73964 6.18854 3.9711 5.84259C4.20256 5.49664 4.53159 5.22674 4.91644 5.06818L10.1635 2.92267C11.3452 2.43919 12.6696 2.43919 13.8514 2.92267L19.0984 5.06818C19.4833 5.22674 19.8124 5.49664 20.0438 5.84259C20.2753 6.18854 20.3987 6.59529 20.3985 7.01154L20.4164 11.1414Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.0245 21.4434C9.68099 20.8999 7.58443 19.5928 6.06403 17.7285C4.54362 15.8642 3.68547 13.5475 3.62445 11.1426V7.00196C3.62405 6.58553 3.74802 6.17752 3.98053 5.83204C4.21305 5.48656 4.54356 5.21892 4.92951 5.06251L10.1765 2.91212C10.7634 2.67391 11.391 2.55357 12.0245 2.5547C12.1965 2.5547 12.3645 2.56313 12.5245 2.57813V21.3125C12.3465 21.3635 12.1835 21.4045 12.0245 21.4375V21.4434Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Security.displayName = "Security";
+const ForwardRef = forwardRef(Security);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Security };

package/src/components/web/SecurityHeart.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 SecurityHeart = (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.0026 11.0807C20.9386 13.6538 20.0216 16.1331 18.3956 18.1285C16.7696 20.1239 14.5269 21.5228 12.0196 22.1051C9.51238 21.5228 7.26961 20.1239 5.64365 18.1285C4.01768 16.1331 3.10065 13.6538 3.03662 11.0807V6.65878C3.03693 6.21235 3.17029 5.77615 3.41965 5.40585C3.66901 5.03555 4.02309 4.74784 4.43665 4.57968L10.0506 2.27988C11.315 1.76218 12.7322 1.76218 13.9966 2.27988L19.6106 4.57968C20.0241 4.74795 20.3781 5.03558 20.6274 5.40585C20.8768 5.77613 21.0102 6.21238 21.0106 6.65878L21.0026 11.0807Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.0206 8.18973C12.3094 7.85935 12.6666 7.59501 13.0673 7.4163C13.4681 7.23759 13.9029 7.14862 14.3416 7.15458C15.2417 7.18759 16.0935 7.56937 16.7163 8.22001C17.3391 8.87064 17.684 9.73927 17.6776 10.6399C17.6776 14.1549 13.1416 16.845 12.0236 16.845C10.9056 16.845 6.36962 14.1549 6.36962 10.6399C6.36327 9.73977 6.70768 8.87251 7.32986 8.22196C7.95204 7.57141 8.80309 7.18835 9.70263 7.15458C10.1409 7.14919 10.5751 7.23859 10.9752 7.41727C11.3754 7.59596 11.7321 7.85984 12.0206 8.18973Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+SecurityHeart.displayName = "SecurityHeart";
+const ForwardRef = forwardRef(SecurityHeart);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as SecurityHeart };

package/src/components/web/SecurityKey.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 SecurityKey = (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 16 20"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M4.23163 7.21931V5.00331C4.23163 2.95131 5.76863 1.11231 7.81763 1.00531C10.0026 0.891305 11.8106 2.62931 11.8106 4.78931V7.21931M8.02063 14.5003V11.9503M12.6168 7.90411C15.1552 10.4425 15.1552 14.5581 12.6168 17.0965C10.0784 19.6349 5.96285 19.6349 3.42444 17.0965C0.886027 14.5581 0.886027 10.4425 3.42444 7.90411C5.96285 5.3657 10.0784 5.3657 12.6168 7.90411ZM8.01765 10.4313C7.60365 10.4313 7.26765 10.7673 7.27065 11.1813C7.27065 11.5953 7.60665 11.9313 8.02065 11.9313C8.43465 11.9313 8.77065 11.5953 8.77065 11.1813C8.77065 10.7673 8.43465 10.4313 8.01765 10.4313Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+SecurityKey.displayName = "SecurityKey";
+const ForwardRef = forwardRef(SecurityKey);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as SecurityKey };

package/src/components/web/Send.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 Send = (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="M5.83109 11.9995H20.5181M5.34109 19.8796L19.7701 13.1794C19.9954 13.0753 20.1861 12.909 20.3198 12.6999C20.4535 12.4908 20.5246 12.2477 20.5246 11.9995C20.5246 11.7513 20.4535 11.5084 20.3198 11.2993C20.1861 11.0902 19.9954 10.9237 19.7701 10.8196L5.34109 4.1196C5.10938 4.01457 4.85179 3.98023 4.60071 4.02121C4.34964 4.06219 4.11629 4.17657 3.93 4.34982C3.74371 4.52307 3.61281 4.74764 3.55375 4.99509C3.49469 5.24254 3.51011 5.50174 3.59808 5.74045L5.83108 11.9936L3.59808 18.2546C3.50895 18.4935 3.49264 18.7535 3.55119 19.0017C3.60974 19.2499 3.74054 19.475 3.92705 19.6489C4.11357 19.8228 4.34744 19.9374 4.59912 19.9785C4.8508 20.0195 5.10899 19.9852 5.34109 19.8796Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Send.displayName = "Send";
+const ForwardRef = forwardRef(Send);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Send };

package/src/components/web/ServiceGoogleDrive.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 ServiceGoogleDrive = (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="M11.4775 20.982L8.21954 10.957M17.7406 5.05176L14.3696 15.4258M9.67157 15.4258H20.3436M3.36957 14.4813L12.0206 8.19531M15.8216 10.9571L6.98663 4.53809M21.0206 12C21.0206 16.9706 16.9911 21 12.0206 21C7.05001 21 3.02057 16.9706 3.02057 12C3.02057 7.02944 7.05001 3 12.0206 3C16.9911 3 21.0206 7.02944 21.0206 12Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+ServiceGoogleDrive.displayName = "ServiceGoogleDrive";
+const ForwardRef = forwardRef(ServiceGoogleDrive);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as ServiceGoogleDrive };

package/src/components/web/Setting.tsx

@@ -0,0 +1,51 @@
+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 Setting = (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
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.2292 9.78786C15.4497 11.0083 15.4497 12.987 14.2292 14.2074C13.0087 15.4279 11.0299 15.4279 9.80937 14.2074C8.58886 12.987 8.58886 11.0083 9.80937 9.78786C11.0299 8.56743 13.0087 8.56743 14.2292 9.78786Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.5809 2.14732L16.3097 2.38983C16.9773 2.61234 17.4285 3.23737 17.4285 3.94114V4.98743C17.4285 5.87746 18.1386 6.60374 19.0287 6.62249L20.0763 6.64499C20.6826 6.65749 21.2327 7.00626 21.504 7.54878L21.8477 8.2363C22.1628 8.86633 22.039 9.62636 21.5415 10.1239L20.8014 10.8639C20.1726 11.4927 20.1613 12.509 20.7764 13.1515L21.5015 13.909C21.9215 14.3478 22.064 14.9816 21.8715 15.5578L21.629 16.2866C21.4064 16.9541 20.7814 17.4054 20.0776 17.4054H19.0312C18.1411 17.4054 17.4148 18.1154 17.396 19.0055L17.3735 20.053C17.361 20.6593 17.0123 21.2093 16.4697 21.4806L15.7821 21.8243C15.1521 22.1393 14.392 22.0156 13.8944 21.5181L13.1544 20.778C12.5256 20.1493 11.5092 20.138 10.8666 20.753L10.1091 21.4781C9.67027 21.8981 9.03646 22.0406 8.46015 21.8481L7.73133 21.6056C7.06376 21.383 6.61247 20.758 6.61247 20.0542V19.008C6.61247 18.1179 5.9024 17.3916 5.01231 17.3729L3.9647 17.3504C3.35839 17.3379 2.80834 16.9891 2.53706 16.4466L2.19327 15.7591C1.87824 15.1291 2.002 14.369 2.49955 13.8715L3.23963 13.1315C3.86844 12.5027 3.87969 11.4864 3.26463 10.8439L2.53956 10.0864C2.11827 9.64636 1.97575 9.01133 2.16827 8.43631L2.4108 7.70753C2.63332 7.04001 3.25838 6.58874 3.9622 6.58874H5.00856C5.89865 6.58874 6.62497 5.87872 6.64372 4.98868L6.66622 3.94114C6.68122 3.33487 7.02876 2.78485 7.57131 2.51359L8.25888 2.16983C8.88894 1.85481 9.64902 1.97857 10.1466 2.47609L10.8866 3.21611C11.5155 3.84489 12.5318 3.85614 13.1744 3.24112L13.9319 2.51609C14.3707 2.09732 15.0058 1.95482 15.5809 2.14732Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Setting.displayName = "Setting";
+const ForwardRef = forwardRef(Setting);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Setting };

package/src/components/web/Share.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 Share = (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="M8.02063 10H5.02063C4.4902 10 3.98146 10.2107 3.60638 10.5858C3.23131 10.9609 3.02063 11.4696 3.02063 12V19C3.02063 19.5304 3.23131 20.0392 3.60638 20.4143C3.98146 20.7894 4.4902 21 5.02063 21H19.0206C19.5511 21 20.0597 20.7894 20.4348 20.4143C20.8099 20.0392 21.0206 19.5304 21.0206 19V12C21.0206 11.4696 20.8099 10.9609 20.4348 10.5858C20.0597 10.2107 19.5511 10 19.0206 10H16.0206M12.0206 17V3M12.0206 3L15.0206 6M12.0206 3L9.02063 6"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Share.displayName = "Share";
+const ForwardRef = forwardRef(Share);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Share };