@webstudio-is/icons 0.3.0 → 0.4.0

package/src/github.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const GithubIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <title>GitHub</title>
+        <path
+          d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+GithubIcon.displayName = "GithubIcon";

package/src/google.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const GoogleIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <title>Google</title>
+        <path
+          d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+GoogleIcon.displayName = "GoogleIcon";

package/src/index.stories.tsx

@@ -0,0 +1,56 @@
+import * as icons from "./index";
+import * as legacyIcons from "./legacy";
+
+export const Icons = () => {
+  return (
+    <>
+      <div style={{ display: "flex", flexWrap: "wrap" }}>
+        {Object.entries(icons).map(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ([name, Icon]: [string, any]) => {
+            if (name.endsWith("Icon") === false) {
+              return null;
+            }
+            return (
+              <div
+                key={name}
+                style={{
+                  width: 150,
+                  height: 100,
+                  margin: 5,
+                  padding: 5,
+                  border: "solid 1px #f5f5f5",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <Icon width="32" height="32" />
+                <div
+                  style={{
+                    marginTop: 16,
+                    fontFamily: "Arial",
+                    textAlign: "center",
+                    wordWrap: "break-word",
+                    width: "100%",
+                    fontSize: "$fontSize$4",
+                    color: "#5a5a5a",
+                  }}
+                >
+                  {name.replace(/Icon$/, "")}
+                  {name in legacyIcons && " (legacy)"}
+                </div>
+              </div>
+            );
+          }
+        )}
+      </div>
+    </>
+  );
+};
+
+export default {
+  title: "All Icons",
+  component: Icons,
+};

package/{lib/cjs/index.d.ts → src/index.ts}

@@ -91,4 +91,3 @@ export * from "./text-underline";
 export * from "./text-uppercase";
 export * from "./text-direction-ltr";
 export * from "./text-direction-rtl";
-//# sourceMappingURL=index.d.ts.map

package/src/justify-content-center.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const JustifyContentCenterIcon = React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = "currentColor", ...props }, forwardedRef) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.7999 4.79999V19.2H11.1999V4.79999H12.7999ZM16.5999 15.8H14.3999V8.19999H16.5999V15.8ZM7.3999 15.8H9.5999V8.19999H7.3999V15.8Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+JustifyContentCenterIcon.displayName = "JustifyContentCenterIcon";

package/src/justify-content-end.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const JustifyContentEndIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M12 16.8H15.2V19.2H16.8V4.79999H15.2V7.19999H12V16.8Z"
+          fill={color}
+        />
+        <path d="M7.19995 16.8H10.4V7.19999H7.19995V16.8Z" fill={color} />
+      </svg>
+    );
+  }
+);
+JustifyContentEndIcon.displayName = "JustifyContentEndIcon";

package/src/justify-content-space-around.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const JustifyContentSpaceAroundIcon = React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = "currentColor", ...props }, forwardedRef) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+    >
+      <path d="M7.9999 19.2V4.79999H6.3999V19.2H7.9999Z" fill={color} />
+      <path d="M17.5999 19.2V4.79999H15.9999V19.2H17.5999Z" fill={color} />
+      <path d="M15.1999 16.8H12.7999V7.19999H15.1999V16.8Z" fill={color} />
+      <path d="M8.7999 16.8H11.1999V7.19999H8.7999V16.8Z" fill={color} />
+    </svg>
+  );
+});
+JustifyContentSpaceAroundIcon.displayName = "JustifyContentSpaceAroundIcon";

package/src/justify-content-space-between.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const JustifyContentSpaceBetweenIcon = React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = "currentColor", ...props }, forwardedRef) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.1999 7.19999H7.9999V4.79999H6.3999V19.2H7.9999V16.8H11.1999V7.19999ZM12.7999 16.8H15.9999V19.2H17.5999V4.79999H15.9999V7.19999H12.7999V16.8Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+JustifyContentSpaceBetweenIcon.displayName = "JustifyContentSpaceBetweenIcon";

package/src/justify-content-start.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const JustifyContentStartIcon = React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = "currentColor", ...props }, forwardedRef) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+    >
+      <path
+        d="M10.9999 7.19999H8.79995V4.79999H7.19995V19.2H8.79995V16.8H10.9999V7.19999Z"
+        fill={color}
+      />
+      <path d="M16.8 7.19999H13.6V16.8H16.8V7.19999Z" fill={color} />
+    </svg>
+  );
+});
+JustifyContentStartIcon.displayName = "JustifyContentStartIcon";

package/src/justify-items-center.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+// @todo this is just a copy of justifyContent icons for now
+export const JustifyItemsCenterIcon = React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = "currentColor", ...props }, forwardedRef) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.7999 4.79999V19.2H11.1999V4.79999H12.7999ZM16.5999 15.8H14.3999V8.19999H16.5999V15.8ZM7.3999 15.8H9.5999V8.19999H7.3999V15.8Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+JustifyItemsCenterIcon.displayName = "JustifyItemsCenterIcon";

package/src/justify-items-end.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+// @todo this is just a copy of justifyContent icons for now
+export const JustifyItemsEndIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M12 16.8H15.2V19.2H16.8V4.79999H15.2V7.19999H12V16.8Z"
+          fill={color}
+        />
+        <path d="M7.19995 16.8H10.4V7.19999H7.19995V16.8Z" fill={color} />
+      </svg>
+    );
+  }
+);
+JustifyItemsEndIcon.displayName = "JustifyItemsEndIcon";

package/src/justify-items-space-around.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+// @todo this is just a copy of justifyContent icons for now
+export const JustifyItemsSpaceAroundIcon = React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = "currentColor", ...props }, forwardedRef) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+    >
+      <path d="M7.9999 19.2V4.79999H6.3999V19.2H7.9999Z" fill={color} />
+      <path d="M17.5999 19.2V4.79999H15.9999V19.2H17.5999Z" fill={color} />
+      <path d="M15.1999 16.8H12.7999V7.19999H15.1999V16.8Z" fill={color} />
+      <path d="M8.7999 16.8H11.1999V7.19999H8.7999V16.8Z" fill={color} />
+    </svg>
+  );
+});
+JustifyItemsSpaceAroundIcon.displayName = "JustifyItemsSpaceAroundIcon";

package/src/justify-items-space-between.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+// @todo this is just a copy of justifyContent icons for now
+export const JustifyItemsSpaceBetweenIcon = React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = "currentColor", ...props }, forwardedRef) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.1999 7.19999H7.9999V4.79999H6.3999V19.2H7.9999V16.8H11.1999V7.19999ZM12.7999 16.8H15.9999V19.2H17.5999V4.79999H15.9999V7.19999H12.7999V16.8Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+JustifyItemsSpaceBetweenIcon.displayName = "JustifyItemsSpaceBetweenIcon";

package/src/justify-items-start.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+// @todo this is just a copy of justifyContent icons for now
+export const JustifyItemsStartIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M10.9999 7.19999H8.79995V4.79999H7.19995V19.2H8.79995V16.8H10.9999V7.19999Z"
+          fill={color}
+        />
+        <path d="M16.8 7.19999H13.6V16.8H16.8V7.19999Z" fill={color} />
+      </svg>
+    );
+  }
+);
+JustifyItemsStartIcon.displayName = "JustifyItemsStartIcon";

package/src/legacy.ts

@@ -0,0 +1,31 @@
+export {
+  ImageIcon,
+  FontBoldIcon,
+  FontItalicIcon,
+  Link2Icon,
+  MobileIcon,
+  LaptopIcon,
+  DesktopIcon,
+  PlusIcon,
+  HamburgerMenuIcon,
+  DotsHorizontalIcon,
+  CheckIcon,
+  RocketIcon,
+  ExternalLinkIcon,
+  Share1Icon,
+  EyeOpenIcon,
+  ExclamationTriangleIcon,
+  DotFilledIcon,
+  TriangleRightIcon,
+  TriangleDownIcon,
+  CommitIcon,
+  InputIcon,
+  ButtonIcon,
+  HeadingIcon,
+  TextIcon,
+  SquareIcon,
+  InfoCircledIcon,
+  CrossCircledIcon,
+  CheckCircledIcon,
+  TokensIcon,
+} from "@radix-ui/react-icons";

package/src/list-nested.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const ListNestedIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="15"
+        height="15"
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill={color}
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z"
+        />
+      </svg>
+    );
+  }
+);
+
+ListNestedIcon.displayName = "ListNestedIcon";

package/src/lock-close.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const LockCloseIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="8"
+        height="10"
+        viewBox="0 0 8 10"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <g clipPath="url(#clip0_561_9202)">
+          <rect width="8" height="9" transform="translate(0 0.5)" fill="none" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M1.14286 4.4375V3.3125C1.14286 2.56658 1.44388 1.85121 1.97969 1.32376C2.51551 0.796316 3.24224 0.5 4 0.5C4.75776 0.5 5.48449 0.796316 6.02031 1.32376C6.55612 1.85121 6.85714 2.56658 6.85714 3.3125V4.4375C7.16025 4.4375 7.45094 4.55603 7.66527 4.767C7.87959 4.97798 8 5.26413 8 5.5625V8.375C8 8.67337 7.87959 8.95952 7.66527 9.1705C7.45094 9.38147 7.16025 9.5 6.85714 9.5H1.14286C0.839753 9.5 0.549062 9.38147 0.334735 9.1705C0.120408 8.95952 0 8.67337 0 8.375V5.5625C0 5.26413 0.120408 4.97798 0.334735 4.767C0.549062 4.55603 0.839753 4.4375 1.14286 4.4375ZM5.71429 3.3125V4.4375H2.28571V3.3125C2.28571 2.86495 2.46633 2.43572 2.78782 2.11926C3.10931 1.80279 3.54534 1.625 4 1.625C4.45466 1.625 4.89069 1.80279 5.21218 2.11926C5.53367 2.43572 5.71429 2.86495 5.71429 3.3125Z"
+            fill={color}
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_561_9202">
+            <rect
+              width="8"
+              height="9"
+              fill="none"
+              transform="translate(0 0.5)"
+            />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+  }
+);
+LockCloseIcon.displayName = "LockCloseIcon";

package/src/lock-open.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const LockOpenIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="8"
+        height="10"
+        viewBox="0 0 8 10"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <g clipPath="url(#clip0_561_9202)">
+          <rect width="8" height="9" transform="translate(0 0.5)" fill="none" />
+          <path
+            d="M4 0.5C3.24224 0.5 2.51551 0.80102 1.97969 1.33684C1.44388 1.87266 1.14286 2.59938 1.14286 3.35714V4.5C0.839753 4.5 0.549062 4.62041 0.334735 4.83474C0.120408 5.04906 0 5.33975 0 5.64286V8.5C0 8.8031 0.120408 9.09379 0.334735 9.30812C0.549062 9.52245 0.839753 9.64286 1.14286 9.64286H6.85714C7.16025 9.64286 7.45094 9.52245 7.66527 9.30812C7.87959 9.09379 8 8.8031 8 8.5V5.64286C8 5.33975 7.87959 5.04906 7.66527 4.83474C7.45094 4.62041 7.16025 4.5 6.85714 4.5H2.28571V3.35714C2.28557 2.9398 2.43768 2.53673 2.71352 2.22353C2.98936 1.91034 3.36998 1.70852 3.784 1.65594C4.19802 1.60335 4.61701 1.70361 4.96239 1.9379C5.30776 2.1722 5.5558 2.52444 5.66 2.92857C5.69789 3.07535 5.79253 3.20107 5.92311 3.27806C5.98777 3.31619 6.0593 3.3412 6.13362 3.35168C6.20795 3.36216 6.28361 3.3579 6.35629 3.33914C6.42896 3.32038 6.49723 3.28749 6.5572 3.24235C6.61717 3.1972 6.66765 3.14069 6.70578 3.07603C6.7439 3.01138 6.76892 2.93984 6.7794 2.86552C6.78988 2.7912 6.78562 2.71553 6.76686 2.64286C6.60831 2.02958 6.25053 1.48634 5.74972 1.09848C5.24891 0.710614 4.63344 0.500099 4 0.5V0.5Z"
+            fill={color}
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_561_9202">
+            <rect
+              width="8"
+              height="9"
+              fill="none"
+              transform="translate(0 0.5)"
+            />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+  }
+);
+LockOpenIcon.displayName = "LockOpenIcon";

package/src/magnifying-glass.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const MagnifyingGlassIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.38912 10.67C7.12473 11.1939 8.02464 11.502 8.9965 11.502C11.4818 11.502 13.4965 9.48723 13.4965 7.00195C13.4965 4.51667 11.4818 2.50195 8.9965 2.50195C6.51122 2.50195 4.4965 4.51667 4.4965 7.00195C4.4965 7.97383 4.8046 8.87375 5.32845 9.60937L2.59467 12.3432C2.30178 12.636 2.30178 13.1109 2.59467 13.4038C2.88756 13.6967 3.36244 13.6967 3.65533 13.4038L6.38912 10.67ZM5.9965 7.00195C5.9965 8.65881 7.33965 10.002 8.9965 10.002C10.6534 10.002 11.9965 8.65881 11.9965 7.00195C11.9965 5.3451 10.6534 4.00195 8.9965 4.00195C7.33965 4.00195 5.9965 5.3451 5.9965 7.00195Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+MagnifyingGlassIcon.displayName = "MagnifyingGlass";

package/src/menu.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const MenuIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M4 8C4 8.82843 3.32843 9.5 2.5 9.5C1.67157 9.5 1 8.82843 1 8C1 7.17157 1.67157 6.5 2.5 6.5C3.32843 6.5 4 7.17157 4 8Z"
+          fill={color}
+        />
+        <path
+          d="M9.5 8C9.5 8.82843 8.82843 9.5 8 9.5C7.17157 9.5 6.5 8.82843 6.5 8C6.5 7.17157 7.17157 6.5 8 6.5C8.82843 6.5 9.5 7.17157 9.5 8Z"
+          fill={color}
+        />
+        <path
+          d="M15 8C15 8.82843 14.3284 9.5 13.5 9.5C12.6716 9.5 12 8.82843 12 8C12 7.17157 12.6716 6.5 13.5 6.5C14.3284 6.5 15 7.17157 15 8Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+MenuIcon.displayName = "MenuIcon";

package/src/new-folder.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const NewFolderIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M8.6 5L7.93068 3.66135C7.73804 3.27608 7.64172 3.08344 7.49802 2.9427C7.37095 2.81824 7.21779 2.72358 7.04965 2.66558C6.8595 2.6 6.64412 2.6 6.21337 2.6H3.92C3.24794 2.6 2.91191 2.6 2.65521 2.73079C2.42942 2.84584 2.24584 3.02942 2.13079 3.25521C2 3.5119 2 3.84794 2 4.52V5M2 5H11.12C12.1281 5 12.6321 5 13.0172 5.19619C13.3559 5.36876 13.6312 5.64412 13.8038 5.98282C14 6.36786 14 6.8719 14 7.88V10.52C14 11.5281 14 12.0321 13.8038 12.4172C13.6312 12.7559 13.3559 13.0312 13.0172 13.2038C12.6321 13.4 12.1281 13.4 11.12 13.4H4.88C3.87191 13.4 3.36786 13.4 2.98282 13.2038C2.64413 13.0312 2.36876 12.7559 2.19619 12.4172C2 12.0321 2 11.5281 2 10.52V5ZM8 11V7.4M6.2 9.2H9.8"
+          stroke={color}
+          strokeWidth="1.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+);
+
+NewFolderIcon.displayName = "NewFolderIcon";

package/src/new-page.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const NewPageIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M9.19995 2.16172V4.64004C9.19995 4.97607 9.19995 5.14409 9.26535 5.27244C9.32287 5.38533 9.41466 5.47712 9.52756 5.53465C9.6559 5.60004 9.82392 5.60004 10.16 5.60004H12.6383M7.99995 11.6V8M6.19995 9.8H9.79995M9.19995 2H6.07995C5.07186 2 4.56781 2 4.18277 2.19619C3.84408 2.36876 3.56871 2.64413 3.39614 2.98282C3.19995 3.36786 3.19995 3.87191 3.19995 4.88V11.12C3.19995 12.1281 3.19995 12.6321 3.39614 13.0172C3.56871 13.3559 3.84408 13.6312 4.18277 13.8038C4.56781 14 5.07186 14 6.07995 14H9.91995C10.928 14 11.4321 14 11.8171 13.8038C12.1558 13.6312 12.4312 13.3559 12.6038 13.0172C12.8 12.6321 12.8 12.1281 12.8 11.12V5.6L9.19995 2Z"
+          stroke={color}
+          strokeWidth="1.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+);
+
+NewPageIcon.displayName = "NewPageIcon";