@webstudio-is/icons 0.2.0 → 0.4.0

package/lib/types.js

@@ -1 +0,0 @@
-export {};

package/lib/undo.js

@@ -1,6 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-export const UndoIcon = React.forwardRef(({ color = "currentColor", ...props }, forwardedRef) => {
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", height: "15", width: "15", viewBox: "0 0 24 24", fill: color, ...props, ref: forwardedRef, children: [_jsx("path", { d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" })] }));
-});
+const UndoIcon = React.forwardRef(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      height: "15",
+      width: "15",
+      viewBox: "0 0 24 24",
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx("path", {
+          d: "M0 0h24v24H0z",
+          fill: "none"
+        }),
+        /* @__PURE__ */ jsx("path", {
+          d: "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+        })
+      ]
+    });
+  }
+);
 UndoIcon.displayName = "UndoIcon";
+export {
+  UndoIcon
+};

package/lib/upload.js

@@ -1,6 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-export const UploadIcon = React.forwardRef(({ color = "currentColor", ...props }, forwardedRef) => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", ...props, ref: forwardedRef, children: _jsx("path", { d: "M9.758 8.442a.625.625 0 10.884-.884l-.884.884zM8 5.8l.442-.442a.625.625 0 00-.884 0L8 5.8zM5.358 7.558a.625.625 0 10.884.884l-.884-.884zM7.375 10.2a.625.625 0 101.25 0h-1.25zm5.5-2.2A4.875 4.875 0 018 12.875v1.25A6.125 6.125 0 0014.125 8h-1.25zM8 12.875A4.875 4.875 0 013.125 8h-1.25A6.125 6.125 0 008 14.125v-1.25zM3.125 8A4.875 4.875 0 018 3.125v-1.25A6.125 6.125 0 001.875 8h1.25zM8 3.125A4.875 4.875 0 0112.875 8h1.25A6.125 6.125 0 008 1.875v1.25zm2.642 4.433l-2.2-2.2-.884.884 2.2 2.2.884-.884zm-3.084-2.2l-2.2 2.2.884.884 2.2-2.2-.884-.884zM8.625 10.2V5.8h-1.25v4.4h1.25z", fill: color }) }));
-});
+const UploadIcon = React.forwardRef(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsx("svg", {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx("path", {
+        d: "M9.758 8.442a.625.625 0 10.884-.884l-.884.884zM8 5.8l.442-.442a.625.625 0 00-.884 0L8 5.8zM5.358 7.558a.625.625 0 10.884.884l-.884-.884zM7.375 10.2a.625.625 0 101.25 0h-1.25zm5.5-2.2A4.875 4.875 0 018 12.875v1.25A6.125 6.125 0 0014.125 8h-1.25zM8 12.875A4.875 4.875 0 013.125 8h-1.25A6.125 6.125 0 008 14.125v-1.25zM3.125 8A4.875 4.875 0 018 3.125v-1.25A6.125 6.125 0 001.875 8h1.25zM8 3.125A4.875 4.875 0 0112.875 8h1.25A6.125 6.125 0 008 1.875v1.25zm2.642 4.433l-2.2-2.2-.884.884 2.2 2.2.884-.884zm-3.084-2.2l-2.2 2.2.884.884 2.2-2.2-.884-.884zM8.625 10.2V5.8h-1.25v4.4h1.25z",
+        fill: color
+      })
+    });
+  }
+);
 UploadIcon.displayName = "UploadIcon";
+export {
+  UploadIcon
+};

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@webstudio-is/icons",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Webstudio Icons",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "scripts": {
-    "dev": "tsup --watch",
-    "build:cjs": "tsc --module commonjs --outDir lib/cjs && find lib/cjs -name '*.js' | while read NAME; do mv $NAME ${NAME%.js}.cjs; done",
-    "build": "rm -fr lib tsconfig.tsbuildinfo && tsc && yarn build:cjs",
-    "generate": "rm -fr src/gen && NODE_OPTIONS='--loader=tsx' svgo-jsx svgo-jsx.config.ts",
+    "dev": "build-package --watch",
+    "build": "build-package",
+    "generate": "rm -fr src/__generated__ && NODE_OPTIONS='--loader=tsx' svgo-jsx svgo-jsx.config.ts",
     "typecheck": "tsc --noEmit",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "checks": "yarn typecheck && yarn lint",
@@ -28,7 +27,7 @@
     "@storybook/react": "^6.5.6",
     "@storybook/testing-library": "^0.0.13",
     "@svgo/jsx": "^0.4.2",
-    "tsup": "^6.1.3",
+    "@webstudio-is/scripts": "*",
     "tsx": "^3.9.0",
     "typescript": "4.7.4"
   },
@@ -45,20 +44,13 @@
     "import": "./lib/index.js",
     "require": "./lib/cjs/index.cjs"
   },
-  "types": "lib/index.d.ts",
+  "types": "src/index.ts",
   "files": [
     "lib/*",
-    "README.md",
+    "src/*",
     "!*.test.*"
   ],
   "license": "MIT",
   "private": false,
-  "sideEffects": false,
-  "tsup": {
-    "entry": [
-      "src/index.ts"
-    ],
-    "format": "esm",
-    "outDir": "lib"
-  }
+  "sideEffects": false
 }

package/src/__generated__/format-clear.tsx

@@ -0,0 +1,15 @@
+// Generated from icons/format-clear.svg
+
+import { forwardRef } from "react";
+import { IconProps } from "../types";
+
+// prettier-ignore
+export const FormatClearIcon = forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="16" height="16" fill={color} {...props} ref={forwardedRef}><path d="M25.35 21.8 21.5 18l1.2-2.8h-3.95l-5.2-5.2H40v5H28.25ZM40.3 45.2 22.85 27.7 18.45 38H13l6-14.1L2.8 7.7l2.1-2.1 37.5 37.5Z" /></svg>
+    );
+  }
+);
+
+FormatClearIcon.displayName = "FormatClearIcon";

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

@@ -1,4 +1,3 @@
 export * from "./format-clear";
 export * from "./subscript";
 export * from "./superscript";
-//# sourceMappingURL=index.d.ts.map

package/src/__generated__/subscript.tsx

@@ -0,0 +1,15 @@
+// Generated from icons/subscript.svg
+
+import { forwardRef } from "react";
+import { IconProps } from "../types";
+
+// prettier-ignore
+export const SubscriptIcon = forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="16" height="16" fill={color} {...props} ref={forwardedRef}><path d="M38.5 40v-4.25q0-.7.4-1.1.4-.4 1.1-.4h4.5V31.5h-6V30h6q.7 0 1.1.4.4.4.4 1.1v2.75q0 .7-.4 1.1-.4.4-1.1.4H40v2.75h6V40Zm-26.75-4L21 21.45 12.4 8h4.3l6.75 10.65L30.2 8h4.3l-8.6 13.45L35.15 36H30.9l-7.45-11.7L16 36Z" /></svg>
+    );
+  }
+);
+
+SubscriptIcon.displayName = "SubscriptIcon";

package/src/__generated__/superscript.tsx

@@ -0,0 +1,15 @@
+// Generated from icons/superscript.svg
+
+import { forwardRef } from "react";
+import { IconProps } from "../types";
+
+// prettier-ignore
+export const SuperscriptIcon = forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="16" height="16" fill={color} {...props} ref={forwardedRef}><path d="M38.5 18v-4.25q0-.7.4-1.1.4-.4 1.1-.4h4.5V9.5h-6V8h6q.7 0 1.1.4.4.4.4 1.1v2.75q0 .7-.4 1.1-.4.4-1.1.4H40v2.75h6V18ZM11.75 40 21 25.45 12.4 12h4.3l6.75 10.65L30.2 12h4.3l-8.6 13.45L35.15 40H30.9l-7.45-11.7L16 40Z" /></svg>
+    );
+  }
+);
+
+SuperscriptIcon.displayName = "SuperscriptIcon";

package/src/align-content-center.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignContentCenterIcon = 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="M8 6H11V9H8V6ZM4 11.5H20V12.5H4V11.5ZM16 6H13V9H16V6ZM13 15H16V18H13V15ZM11 15H8V18H11V15Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+AlignContentCenterIcon.displayName = "AlignContentCenterIcon";

package/src/align-content-end.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignContentEndIcon = 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="M8 8H11V11H8V8ZM4 18H20V19H4V18ZM16 8H13V11H16V8ZM13 13H16V16H13V13ZM11 13H8V16H11V13Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+AlignContentEndIcon.displayName = "AlignContentEndIcon";

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignContentSpaceAroundIcon = 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="M19 5H5V6H19V5ZM19 18H5V19H19V18ZM8 8H11V11H8V8ZM16 8H13V11H16V8ZM13 13H16V16H13V13ZM11 13H8V16H11V13Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+AlignContentSpaceAroundIcon.displayName = "AlignContentSpaceAroundIcon";

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignContentSpaceBetweenIcon = 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="M19 5H5V6H19V5ZM19 18H5V19H19V18ZM8 8H11V11H8V8ZM16 8H13V11H16V8ZM13 13H16V16H13V13ZM11 13H8V16H11V13Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+AlignContentSpaceBetweenIcon.displayName = "AlignContentSpaceBetweenIcon";

package/src/align-content-start.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignContentStartIcon = 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="M4 6H20V7H4V6Z" fill={color} />
+        <path d="M8 9H11V12H8V9Z" fill={color} />
+        <path d="M16 9H13V12H16V9Z" fill={color} />
+        <path d="M13 14H16V17H13V14Z" fill={color} />
+        <path d="M11 14H8V17H11V14Z" fill={color} />
+      </svg>
+    );
+  }
+);
+AlignContentStartIcon.displayName = "AlignContentStartIcon";

package/src/align-content-stretch.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignContentStretchIcon = 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="M19 5H5V6H19V5ZM19 18H5V19H19V18ZM8 8H11V11H8V8ZM16 8H13V11H16V8ZM13 13H16V16H13V13ZM11 13H8V16H11V13Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+AlignContentStretchIcon.displayName = "AlignContentStretchIcon";

package/src/align-items-baseline.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignItemsBaselineIcon = 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="M10 6H8V15H10V6ZM7 5V16H11V5H7Z"
+        fill={color}
+      />
+      <path d="M7 12H11V18H7V12Z" fill={color} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 13H8V17H10V13ZM7 12V18H11V12H7Z"
+        fill={color}
+      />
+      <path d="M13 12H16V15H13V12Z" fill={color} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15 13H14V14H15V13ZM13 12V15H16V12H13Z"
+        fill={color}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 8H14V15H16V8ZM13 7V16H17V7H13Z"
+        fill={color}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20 13H4V11.5H20V13Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+AlignItemsBaselineIcon.displayName = "AlignItemsBaselineIcon";

package/src/align-items-center.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignItemsCenterIcon = 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="M10.4 11H12.8V5L15 5V11H20V12.6H15V19H12.8V12.6H10.4V17H8.2V12.6H4V11H8.2V7H10.4V11Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+AlignItemsCenterIcon.displayName = "AlignItemsCenterIcon";

package/src/align-items-end.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignItemsEndIcon = 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="M16 16H19.2V17.6H4.80005V16H8.00005V9.59999H11.2V16H12.8V6.39999H16V16Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+AlignItemsEndIcon.displayName = "AlignItemsEndIcon";

package/src/align-items-start.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignItemsStartIcon = 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.8 7.99999H11.2V14.4H8.00005V7.99999H4.80005V6.39999H19.2V7.99999H16V17.6H12.8V7.99999Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+AlignItemsStartIcon.displayName = "AlignItemsStartIcon";

package/src/align-items-stretch.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignItemsStretchIcon = 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="M16 16H19.2V17.6H4.80005V16H8.00005V7.99999H4.80005V6.39999H19.2V7.99999H16V16ZM12.8 16V7.99999H11.2V16H12.8Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+AlignItemsStretchIcon.displayName = "AlignItemsStretchIcon";

package/src/align-self-baseline.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignSelfBaselineIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <mask id="a" fill="#fff">
+          <rect width="3" height="10" x="6.5" y="3" rx=".8" />
+        </mask>
+        <rect
+          width="3"
+          height="10"
+          x="6.5"
+          y="3"
+          stroke={color}
+          strokeWidth="2"
+          mask="url(#a)"
+          rx=".8"
+        />
+        <rect
+          width="3"
+          height="5.73926"
+          x="6.5"
+          y="7.25977"
+          fill={color}
+          rx=".8"
+        />
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M1.5 7.95c0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7 0 .3866-.3439.7-.7682.7H2.26818c-.42425 0-.76818-.3134-.76818-.7Z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  }
+);
+AlignSelfBaselineIcon.displayName = "AlignSelfBaselineIcon";

package/src/align-self-center.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignSelfCenterIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <rect width="3" height="10" x="6.5" y="3" fill={color} rx=".8" />
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M1.5 7.95c0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7 0 .3866-.3439.7-.7682.7H2.26818c-.42425 0-.76818-.3134-.76818-.7Z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  }
+);
+AlignSelfCenterIcon.displayName = "AlignSelfCenterIcon";

package/src/align-self-end.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignSelfEndIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M14.5 14.2004c0 .3866-.3439.7-.7682.7H2.26818c-.42425 0-.76818-.3134-.76818-.7 0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7Z"
+          clipRule="evenodd"
+        />
+        <rect
+          width="3"
+          height="9"
+          x="9.5"
+          y="12.4004"
+          fill={color}
+          rx=".8"
+          transform="rotate(-180 9.5 12.4004)"
+        />
+      </svg>
+    );
+  }
+);
+AlignSelfEndIcon.displayName = "AlignSelfEndIcon";

package/src/align-self-start.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignSelfStartIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M1.5 1.79961c0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7 0 .3866-.3439.7-.7682.7H2.26818c-.42425 0-.76818-.3134-.76818-.7Z"
+          clipRule="evenodd"
+        />
+        <rect width="3" height="9" x="6.5" y="3.59961" fill={color} rx=".8" />
+      </svg>
+    );
+  }
+);
+AlignSelfStartIcon.displayName = "AlignSelfStartIcon";