@custmaz/layout-icons 0.1.0

package/dist/index.mjs

@@ -0,0 +1,297 @@
+// src/createIcon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function createIcon(name, render) {
+  const Icon = ({
+    size = 24,
+    strokeWidth = 0.8,
+    radius = 1,
+    variant = "outline",
+    title,
+    ...props
+  }) => {
+    const ariaHidden = title == null ? true : void 0;
+    const role = title ? "img" : void 0;
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: variant === "filled" ? "currentColor" : "none",
+        stroke: variant === "outline" ? "currentColor" : "none",
+        strokeWidth: variant === "outline" ? strokeWidth : void 0,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        focusable: "false",
+        "aria-hidden": ariaHidden,
+        role,
+        ...props,
+        children: [
+          title && /* @__PURE__ */ jsx("title", { children: title }),
+          render({ radius, variant })
+        ]
+      }
+    );
+  };
+  Icon.displayName = name;
+  return Icon;
+}
+
+// src/iconLayout.tsx
+function repeat(count, render) {
+  return Array.from({ length: count }, (_, i) => render(i));
+}
+function horizontalStack(options) {
+  const { count, startX, gap, render } = options;
+  return repeat(count, (i) => {
+    const x = startX + i * gap;
+    return render(x, i);
+  });
+}
+function verticalStack(options) {
+  const { count, startY, gap, render } = options;
+  return repeat(count, (i) => {
+    const y = startY + i * gap;
+    return render(y, i);
+  });
+}
+function grid(options) {
+  const { rows, cols, startX, startY, cellSize, gap, render } = options;
+  return repeat(
+    rows,
+    (row) => repeat(cols, (col) => {
+      const x = startX + col * (cellSize + gap);
+      const y = startY + row * (cellSize + gap);
+      return render(x, y, row, col);
+    })
+  );
+}
+
+// src/icons/Grid.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var Grid = createIcon("Grid", ({ radius }) => /* @__PURE__ */ jsx2(Fragment, { children: grid({
+  rows: 2,
+  cols: 2,
+  startX: 2,
+  startY: 2,
+  cellSize: 7,
+  gap: 1.5,
+  render: (x, y, row, col) => /* @__PURE__ */ jsx2(
+    "rect",
+    {
+      x,
+      y,
+      width: 7,
+      height: 7,
+      rx: radius
+    },
+    `${row}-${col}`
+  )
+}) }));
+
+// src/icons/Grid3x3.tsx
+import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
+var Grid3x3 = createIcon("Grid3x3", ({ radius }) => /* @__PURE__ */ jsx3(Fragment2, { children: grid({
+  rows: 3,
+  cols: 3,
+  startX: 2,
+  startY: 2,
+  cellSize: 5,
+  gap: 1.5,
+  render: (x, y, row, col) => /* @__PURE__ */ jsx3(
+    "rect",
+    {
+      x,
+      y,
+      width: 5,
+      height: 5,
+      rx: radius
+    },
+    `${row}-${col}`
+  )
+}) }));
+
+// src/icons/Masonry.tsx
+import { Fragment as Fragment3, jsx as jsx4 } from "react/jsx-runtime";
+var Masonry = createIcon("Masonry", ({ radius }) => {
+  const blocks = [
+    { x: 3, y: 3, width: 6, height: 18 },
+    { x: 11, y: 3, width: 5, height: 10 },
+    { x: 11, y: 15, width: 5, height: 6 },
+    { x: 18, y: 3, width: 3, height: 18 }
+  ];
+  return /* @__PURE__ */ jsx4(Fragment3, { children: blocks.map((props, i) => /* @__PURE__ */ jsx4("rect", { ...props, rx: radius }, i)) });
+});
+
+// src/icons/List.tsx
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var List = createIcon("List", ({ radius }) => {
+  const rows = [
+    { iconY: 4, textY: 5.5 },
+    { iconY: 10, textY: 11.5 },
+    { iconY: 16, textY: 17.5 }
+  ];
+  return /* @__PURE__ */ jsx5(Fragment4, { children: rows.map(({ iconY, textY }, i) => /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx5(
+      "rect",
+      {
+        x: 3,
+        y: iconY,
+        width: 5,
+        height: 5,
+        rx: radius
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "rect",
+      {
+        x: 11,
+        y: textY,
+        width: 10,
+        height: 2,
+        rx: 1
+      }
+    )
+  ] }, i)) });
+});
+
+// src/icons/Tall.tsx
+import { Fragment as Fragment5, jsx as jsx6 } from "react/jsx-runtime";
+var Tall = createIcon("Tall", ({ radius }) => /* @__PURE__ */ jsx6(Fragment5, { children: horizontalStack({
+  count: 3,
+  startX: 3,
+  gap: 6.5,
+  render: (x, i) => /* @__PURE__ */ jsx6(
+    "rect",
+    {
+      x,
+      y: 3,
+      width: 5,
+      height: 18,
+      rx: radius
+    },
+    i
+  )
+}) }));
+
+// src/icons/Landscape.tsx
+import { Fragment as Fragment6, jsx as jsx7 } from "react/jsx-runtime";
+var Landscape = createIcon("Landscape", ({ radius }) => {
+  const rows = [
+    { y: 3, height: 5 },
+    { y: 10, height: 5 },
+    { y: 17, height: 4 }
+  ];
+  return /* @__PURE__ */ jsx7(Fragment6, { children: rows.map(({ y, height }, i) => /* @__PURE__ */ jsx7(
+    "rect",
+    {
+      x: 3,
+      y,
+      width: 18,
+      height,
+      rx: radius
+    },
+    i
+  )) });
+});
+
+// src/icons/Card.tsx
+import { Fragment as Fragment7, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var Card = createIcon("Card", ({ radius, variant }) => {
+  const outerPadding = 4;
+  const size = 16;
+  return /* @__PURE__ */ jsxs3(Fragment7, { children: [
+    /* @__PURE__ */ jsx8(
+      "rect",
+      {
+        x: outerPadding,
+        y: outerPadding,
+        width: size,
+        height: size,
+        rx: radius + 1
+      }
+    ),
+    variant === "outline" && /* @__PURE__ */ jsx8(
+      "rect",
+      {
+        x: 6,
+        y: 7,
+        width: 12,
+        height: 2,
+        rx: 1
+      }
+    )
+  ] });
+});
+
+// src/icons/Split.tsx
+import { Fragment as Fragment8, jsx as jsx9 } from "react/jsx-runtime";
+var Split = createIcon("Split", ({ radius }) => /* @__PURE__ */ jsx9(Fragment8, { children: horizontalStack({
+  count: 2,
+  startX: 3,
+  gap: 10,
+  render: (x, i) => /* @__PURE__ */ jsx9(
+    "rect",
+    {
+      x,
+      y: 3,
+      width: 8,
+      height: 18,
+      rx: radius
+    },
+    i
+  )
+}) }));
+
+// src/icons/HamburgerMenu.tsx
+import { Fragment as Fragment9, jsx as jsx10 } from "react/jsx-runtime";
+var HamburgerMenu = createIcon(
+  "HamburgerMenu",
+  ({ radius }) => /* @__PURE__ */ jsx10(Fragment9, { children: verticalStack({
+    count: 3,
+    startY: 5,
+    gap: 5.75,
+    render: (y, i) => /* @__PURE__ */ jsx10(
+      "rect",
+      {
+        x: 3,
+        y,
+        width: 18,
+        height: 2.5,
+        rx: radius
+      },
+      i
+    )
+  }) })
+);
+
+// src/icons/Kebab.tsx
+import { Fragment as Fragment10, jsx as jsx11 } from "react/jsx-runtime";
+var Kebab = createIcon("Kebab", () => /* @__PURE__ */ jsx11(Fragment10, { children: horizontalStack({
+  count: 3,
+  startX: 6,
+  gap: 6,
+  render: (x, i) => /* @__PURE__ */ jsx11("circle", { cx: x, cy: 12, r: 1.5 }, i)
+}) }));
+
+// src/icons/Meatballs.tsx
+import { Fragment as Fragment11, jsx as jsx12 } from "react/jsx-runtime";
+var Meatballs = createIcon("Meatballs", () => /* @__PURE__ */ jsx12(Fragment11, { children: verticalStack({
+  count: 3,
+  startY: 6,
+  gap: 6,
+  render: (y, i) => /* @__PURE__ */ jsx12("circle", { cx: 12, cy: y, r: 1.5 }, i)
+}) }));
+export {
+  Card,
+  Grid,
+  Grid3x3,
+  HamburgerMenu,
+  Kebab,
+  Landscape,
+  List,
+  Masonry,
+  Meatballs,
+  Split,
+  Tall
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@custmaz/layout-icons",
+  "version": "0.1.0",
+  "description": "A small set of layout-focused SVG icons for React, designed for UI structure and composition.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/custmaz/layout-icons.git"
+  },
+  "homepage": "https://github.com/custmaz/layout-icons",
+  "bugs": {
+    "url": "https://github.com/custmaz/layout-icons/issues"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "tsconfig.json",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "devDependencies": {
+    "@types/react": ">=17",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "icons",
+    "svg",
+    "layout",
+    "grid",
+    "masonry",
+    "card",
+    "gallery",
+    "ui",
+    "design-system",
+    "react-icons",
+    "menu",
+    "accessibility",
+    "themeable"
+  ]
+}

package/src/createIcon.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export function createIcon(
+    name: string,
+    render: (ctx: {
+        radius: number;
+        variant: "outline" | "filled";
+    }) => React.ReactNode
+) {
+    const Icon = ({
+        size = 24,
+        strokeWidth = 0.8,
+        radius = 1,
+        variant = "outline",
+        title,
+        ...props
+    }: IconProps) => {
+        const ariaHidden = title == null ? true : undefined;
+        const role = title ? "img" : undefined;
+
+        return (
+            <svg
+                width={size}
+                height={size}
+                viewBox="0 0 24 24"
+                fill={variant === "filled" ? "currentColor" : "none"}
+                stroke={variant === "outline" ? "currentColor" : "none"}
+                strokeWidth={variant === "outline" ? strokeWidth : undefined}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                focusable="false"
+                aria-hidden={ariaHidden}
+                role={role}
+                {...props}
+            >
+                {title && <title>{title}</title>}
+                {render({ radius, variant })}
+            </svg>
+        );
+    };
+
+    Icon.displayName = name;
+    return Icon;
+}

package/src/iconLayout.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+
+// util
+export function repeat(count: number, render: (index: number) => React.ReactNode) {
+    return Array.from({ length: count }, (_, i) => render(i));
+}
+
+// types
+type HorizontalStackOptions = {
+    count: number;
+    startX: number;
+    gap: number;
+    render: (x: number, index: number) => React.ReactNode;
+};
+
+type VerticalStackOptions = {
+    count: number;
+    startY: number;
+    gap: number;
+    render: (y: number, index: number) => React.ReactNode;
+};
+
+type GridOptions = {
+    rows: number;
+    cols: number;
+    startX: number;
+    startY: number;
+    cellSize: number;
+    gap: number;
+
+    render: (
+        x: number,
+        y: number,
+        row: number,
+        col: number
+    ) => React.ReactNode;
+};
+
+
+// layout helpers
+export function horizontalStack(options: HorizontalStackOptions) {
+    const { count, startX, gap, render } = options;
+
+    return repeat(count, (i) => {
+        const x = startX + i * gap;
+        return render(x, i);
+    });
+}
+
+export function verticalStack(options: VerticalStackOptions) {
+    const { count, startY, gap, render } = options;
+
+    return repeat(count, (i) => {
+        const y = startY + i * gap;
+        return render(y, i);
+    });
+}
+
+export function grid(options: GridOptions) {
+    const { rows, cols, startX, startY, cellSize, gap, render } = options;
+
+    return repeat(rows, (row) =>
+        repeat(cols, (col) => {
+            const x = startX + col * (cellSize + gap);
+            const y = startY + row * (cellSize + gap);
+
+            return render(x, y, row, col);
+        })
+    );
+}

package/src/icons/Card.tsx

@@ -0,0 +1,28 @@
+import { createIcon } from "../createIcon";
+
+export const Card = createIcon("Card", ({ radius, variant }) => {
+    const outerPadding = 4;
+    const size = 16;
+
+    return (
+        <>
+            <rect
+                x={outerPadding}
+                y={outerPadding}
+                width={size}
+                height={size}
+                rx={radius + 1}
+            />
+
+            {variant === "outline" && (
+                <rect
+                    x={6}
+                    y={7}
+                    width={12}
+                    height={2}
+                    rx={1}
+                />
+            )}
+        </>
+    );
+});

package/src/icons/Grid.tsx

@@ -0,0 +1,25 @@
+import { createIcon } from "../createIcon";
+import { grid } from "../iconLayout";
+
+export const Grid = createIcon("Grid", ({ radius }) => (
+    <>
+        {grid({
+            rows: 2,
+            cols: 2,
+            startX: 2,
+            startY: 2,
+            cellSize: 7,
+            gap: 1.5,
+            render: (x, y, row, col) => (
+                <rect
+                    key={`${row}-${col}`}
+                    x={x}
+                    y={y}
+                    width={7}
+                    height={7}
+                    rx={radius}
+                />
+            ),
+        })}
+    </>
+));

package/src/icons/Grid3x3.tsx

@@ -0,0 +1,25 @@
+import { createIcon } from "../createIcon";
+import { grid } from "../iconLayout";
+
+export const Grid3x3 = createIcon("Grid3x3", ({ radius }) => (
+    <>
+        {grid({
+            rows: 3,
+            cols: 3,
+            startX: 2,
+            startY: 2,
+            cellSize: 5,
+            gap: 1.5,
+            render: (x, y, row, col) => (
+                <rect
+                    key={`${row}-${col}`}
+                    x={x}
+                    y={y}
+                    width={5}
+                    height={5}
+                    rx={radius}
+                />
+            ),
+        })}
+    </>
+));

package/src/icons/HamburgerMenu.tsx

@@ -0,0 +1,23 @@
+import { createIcon } from "../createIcon";
+import { verticalStack } from "../iconLayout";
+
+export const HamburgerMenu = createIcon("HamburgerMenu", ({ radius }) => (
+    <>
+        {verticalStack({
+            count: 3,
+            startY: 5,
+            gap: 5.75,
+            render: (y, i) => (
+                <rect
+                    key={i}
+                    x={3}
+                    y={y}
+                    width={18}
+                    height={2.5}
+                    rx={radius}
+                />
+            ),
+        })}
+    </>
+)
+);

package/src/icons/Kebab.tsx

@@ -0,0 +1,15 @@
+import { createIcon } from "../createIcon";
+import { horizontalStack } from "../iconLayout";
+
+export const Kebab = createIcon("Kebab", () => (
+    <>
+        {horizontalStack({
+            count: 3,
+            startX: 6,
+            gap: 6,
+            render: (x, i) => (
+                <circle key={i} cx={x} cy={12} r={1.5} />
+            ),
+        })}
+    </>
+));

package/src/icons/Landscape.tsx

@@ -0,0 +1,24 @@
+import { createIcon } from "../createIcon";
+
+export const Landscape = createIcon("Landscape", ({ radius }) => {
+    const rows = [
+        { y: 3, height: 5 },
+        { y: 10, height: 5 },
+        { y: 17, height: 4 },
+    ];
+
+    return (
+        <>
+            {rows.map(({ y, height }, i) => (
+                <rect
+                    key={i}
+                    x={3}
+                    y={y}
+                    width={18}
+                    height={height}
+                    rx={radius}
+                />
+            ))}
+        </>
+    );
+});

package/src/icons/List.tsx

@@ -0,0 +1,32 @@
+import { createIcon } from "../createIcon";
+
+export const List = createIcon("List", ({ radius }) => {
+    const rows = [
+        { iconY: 4, textY: 5.5 },
+        { iconY: 10, textY: 11.5 },
+        { iconY: 16, textY: 17.5 },
+    ];
+
+    return (
+        <>
+            {rows.map(({ iconY, textY }, i) => (
+                <g key={i}>
+                    <rect
+                        x={3}
+                        y={iconY}
+                        width={5}
+                        height={5}
+                        rx={radius}
+                    />
+                    <rect
+                        x={11}
+                        y={textY}
+                        width={10}
+                        height={2}
+                        rx={1}
+                    />
+                </g>
+            ))}
+        </>
+    );
+});

package/src/icons/Masonry.tsx

@@ -0,0 +1,18 @@
+import { createIcon } from "../createIcon";
+
+export const Masonry = createIcon("Masonry", ({ radius }) => {
+    const blocks = [
+        { x: 3, y: 3, width: 6, height: 18 },
+        { x: 11, y: 3, width: 5, height: 10 },
+        { x: 11, y: 15, width: 5, height: 6 },
+        { x: 18, y: 3, width: 3, height: 18 },
+    ];
+
+    return (
+        <>
+            {blocks.map((props, i) => (
+                <rect key={i} {...props} rx={radius} />
+            ))}
+        </>
+    );
+});

package/src/icons/Meatballs.tsx

@@ -0,0 +1,15 @@
+import { createIcon } from "../createIcon";
+import { verticalStack } from "../iconLayout";
+
+export const Meatballs = createIcon("Meatballs", () => (
+    <>
+        {verticalStack({
+            count: 3,
+            startY: 6,
+            gap: 6,
+            render: (y, i) => (
+                <circle key={i} cx={12} cy={y} r={1.5} />
+            ),
+        })}
+    </>
+));