@custmaz/layout-icons 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,31 @@
+# Changelog
+
+## 0.1.0
+
+Initial release.
+
+## Overview
+
+A focused, customisable set of SVG icon components for representing layout and container structures in user interfaces.
+
+
+### Features
+- Layout and container-oriented icons
+- Outline and filled variants
+- Consistent sizing and corner-radius control
+- Sensible accessibility defaults with optional titles
+- Lightweight, dependency-free SVG components
+
+
+### Included Icons
+- Grid (2×2)
+- Grid3x3
+- Masonry
+- List
+- Tall
+- Landscape
+- Card
+- Split
+- HamburgerMenu
+- Kebab (three horizontal dots)
+- Meatballs (three vertical dots)

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 custmaz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,148 @@
+# Layout Icons
+
+A focused, customisable set of SVG icon components for representing layout and container structures in user interfaces.
+
+---
+
+## Design Principles
+
+This library is intentionally narrow in scope.
+
+- Icons represent layout structure, not visual decoration
+- All icons share a consistent grid, sizing, and corner-radius model
+- Components are designed to scale, style, and customise
+- Accessibility is supported via optional `title` props
+
+See the [Changelog](./CHANGELOG.md) for details on versions and updates.
+
+---
+
+## Installation
+
+```bash
+npm install @custmaz/layout-icons
+```
+
+---
+
+## Maintainer
+
+This library is currently maintained solely by the author.
+External contributions are not accepted at this time to ensure consistency and quality.
+
+--- 
+## Basic Usage
+
+Import and use the icons in your React components:
+
+```tsx
+import { List, HamburgerMenu, Card } from "@custmaz/layout-icons";
+
+export function Example() {
+  return (
+    <div>
+      <List />
+      <HamburgerMenu />
+      <Card />
+    </div>
+  );
+}
+```
+Icons inherit their colour from their parent element.
+
+---
+
+## Customisation
+
+All icons share a consistent set of props:
+
+``` tsx
+<Grid
+  size={32}           // Width & height
+  strokeWidth={2}     // Outline thickness
+  radius={4}          // Corner rounding
+  variant="outline"   // "outline" or "filled"
+  title="Grid layout" // Accessibility label
+/>
+```
+
+These props allow you to adjust scale, stroke weight, corner rounding, and visual style without changing the icon structure.
+
+---
+
+## Props Reference
+
+| Prop        | Type                              | Default   | Description                             |
+|-------------|-----------------------------------|-----------|-----------------------------------------|
+| size        | number \| string                  | 24        | Width and height of the icon            |
+| strokeWidth | number                            | 0.8       | Stroke thickness (outline only)         |
+| radius      | number                            | 1         | Corner radius                           |
+| variant     | "outline" \| "filled"             | "outline" | Visual style                            |
+| title       | string                            | —         | Enables accessibility                   |
+
+> Note: Defaults are for version 0.1.0
+
+---
+
+## Theming
+
+Icons are plain SVG elements and can be styled using standard CSS techniques.
+
+``` tsx
+<div style={{ color: "#1f2937" }}>
+  <Grid />
+  <Masonry />
+</div>
+```
+
+Works with:
+* CSS/SCSS
+* CSS Modules
+* Tailwind
+* styled-components
+* inline styles
+
+---
+
+## Accessibility
+Icons are decorative by default.
+
+To provide an accessible label, pass a `title` prop:
+
+``` tsx
+<Grid title="Grid layout" />
+```
+
+This ensures that the icon is announced properly by screen readers.
+
+---
+
+### Available Icons
+
+#### Layout:
+* Grid
+* Grid3x3
+* Masonry
+* List
+* Tall
+* Landscape
+* Split
+* Card
+
+#### Menus:
+* HamburgerMenu
+* Kebab (three horizontal dots)
+* Meatballs (three vertical dots)
+
+---
+
+## Issues
+
+Bug reports and feature requests can be filed on GitHub:
+
+https://github.com/custmaz/layout-icons/issues
+
+---
+
+## License
+MIT

package/dist/index.d.mts

@@ -0,0 +1,67 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+declare const Grid: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Grid3x3: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Masonry: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const List: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Tall: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Landscape: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Card: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Split: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const HamburgerMenu: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Kebab: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Meatballs: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+    size?: number | string;
+    strokeWidth?: number;
+    radius?: number;
+    variant?: "outline" | "filled";
+    title?: string;
+}
+
+export { Card, Grid, Grid3x3, HamburgerMenu, type IconProps, Kebab, Landscape, List, Masonry, Meatballs, Split, Tall };

package/dist/index.d.ts

@@ -0,0 +1,67 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+declare const Grid: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Grid3x3: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Masonry: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const List: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Tall: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Landscape: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Card: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Split: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const HamburgerMenu: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Kebab: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Meatballs: {
+    ({ size, strokeWidth, radius, variant, title, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+    size?: number | string;
+    strokeWidth?: number;
+    radius?: number;
+    variant?: "outline" | "filled";
+    title?: string;
+}
+
+export { Card, Grid, Grid3x3, HamburgerMenu, type IconProps, Kebab, Landscape, List, Masonry, Meatballs, Split, Tall };

package/dist/index.js

@@ -0,0 +1,334 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Card: () => Card,
+  Grid: () => Grid,
+  Grid3x3: () => Grid3x3,
+  HamburgerMenu: () => HamburgerMenu,
+  Kebab: () => Kebab,
+  Landscape: () => Landscape,
+  List: () => List,
+  Masonry: () => Masonry,
+  Meatballs: () => Meatballs,
+  Split: () => Split,
+  Tall: () => Tall
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/createIcon.tsx
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Grid = createIcon("Grid", ({ radius }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: grid({
+  rows: 2,
+  cols: 2,
+  startX: 2,
+  startY: 2,
+  cellSize: 7,
+  gap: 1.5,
+  render: (x, y, row, col) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "rect",
+    {
+      x,
+      y,
+      width: 7,
+      height: 7,
+      rx: radius
+    },
+    `${row}-${col}`
+  )
+}) }));
+
+// src/icons/Grid3x3.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Grid3x3 = createIcon("Grid3x3", ({ radius }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: grid({
+  rows: 3,
+  cols: 3,
+  startX: 2,
+  startY: 2,
+  cellSize: 5,
+  gap: 1.5,
+  render: (x, y, row, col) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "rect",
+    {
+      x,
+      y,
+      width: 5,
+      height: 5,
+      rx: radius
+    },
+    `${row}-${col}`
+  )
+}) }));
+
+// src/icons/Masonry.tsx
+var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: blocks.map((props, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { ...props, rx: radius }, i)) });
+});
+
+// src/icons/List.tsx
+var import_jsx_runtime5 = require("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__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: rows.map(({ iconY, textY }, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "rect",
+      {
+        x: 3,
+        y: iconY,
+        width: 5,
+        height: 5,
+        rx: radius
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "rect",
+      {
+        x: 11,
+        y: textY,
+        width: 10,
+        height: 2,
+        rx: 1
+      }
+    )
+  ] }, i)) });
+});
+
+// src/icons/Tall.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Tall = createIcon("Tall", ({ radius }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: horizontalStack({
+  count: 3,
+  startX: 3,
+  gap: 6.5,
+  render: (x, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "rect",
+    {
+      x,
+      y: 3,
+      width: 5,
+      height: 18,
+      rx: radius
+    },
+    i
+  )
+}) }));
+
+// src/icons/Landscape.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Landscape = createIcon("Landscape", ({ radius }) => {
+  const rows = [
+    { y: 3, height: 5 },
+    { y: 10, height: 5 },
+    { y: 17, height: 4 }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: rows.map(({ y, height }, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "rect",
+    {
+      x: 3,
+      y,
+      width: 18,
+      height,
+      rx: radius
+    },
+    i
+  )) });
+});
+
+// src/icons/Card.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Card = createIcon("Card", ({ radius, variant }) => {
+  const outerPadding = 4;
+  const size = 16;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "rect",
+      {
+        x: outerPadding,
+        y: outerPadding,
+        width: size,
+        height: size,
+        rx: radius + 1
+      }
+    ),
+    variant === "outline" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "rect",
+      {
+        x: 6,
+        y: 7,
+        width: 12,
+        height: 2,
+        rx: 1
+      }
+    )
+  ] });
+});
+
+// src/icons/Split.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Split = createIcon("Split", ({ radius }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: horizontalStack({
+  count: 2,
+  startX: 3,
+  gap: 10,
+  render: (x, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "rect",
+    {
+      x,
+      y: 3,
+      width: 8,
+      height: 18,
+      rx: radius
+    },
+    i
+  )
+}) }));
+
+// src/icons/HamburgerMenu.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var HamburgerMenu = createIcon(
+  "HamburgerMenu",
+  ({ radius }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: verticalStack({
+    count: 3,
+    startY: 5,
+    gap: 5.75,
+    render: (y, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "rect",
+      {
+        x: 3,
+        y,
+        width: 18,
+        height: 2.5,
+        rx: radius
+      },
+      i
+    )
+  }) })
+);
+
+// src/icons/Kebab.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Kebab = createIcon("Kebab", () => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: horizontalStack({
+  count: 3,
+  startX: 6,
+  gap: 6,
+  render: (x, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: x, cy: 12, r: 1.5 }, i)
+}) }));
+
+// src/icons/Meatballs.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Meatballs = createIcon("Meatballs", () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: verticalStack({
+  count: 3,
+  startY: 6,
+  gap: 6,
+  render: (y, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: 12, cy: y, r: 1.5 }, i)
+}) }));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Card,
+  Grid,
+  Grid3x3,
+  HamburgerMenu,
+  Kebab,
+  Landscape,
+  List,
+  Masonry,
+  Meatballs,
+  Split,
+  Tall
+});