@behivetech/atoms.icon 0.0.0-stage → 0.3.3

package/dist/index.js

@@ -0,0 +1,462 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js
+var require_classnames = __commonJS({
+  "../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js"(exports, module) {
+    "use strict";
+    (function() {
+      "use strict";
+      var hasOwn = {}.hasOwnProperty;
+      function classNames() {
+        var classes = "";
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
+          if (arg) {
+            classes = appendClass(classes, parseValue(arg));
+          }
+        }
+        return classes;
+      }
+      function parseValue(arg) {
+        if (typeof arg === "string" || typeof arg === "number") {
+          return arg;
+        }
+        if (typeof arg !== "object") {
+          return "";
+        }
+        if (Array.isArray(arg)) {
+          return classNames.apply(null, arg);
+        }
+        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+          return arg.toString();
+        }
+        var classes = "";
+        for (var key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes = appendClass(classes, key);
+          }
+        }
+        return classes;
+      }
+      function appendClass(value, newClass) {
+        if (!newClass) {
+          return value;
+        }
+        if (value) {
+          return value + " " + newClass;
+        }
+        return value + newClass;
+      }
+      if (typeof module !== "undefined" && module.exports) {
+        classNames.default = classNames;
+        module.exports = classNames;
+      } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
+        define("classnames", [], function() {
+          return classNames;
+        });
+      } else {
+        window.classNames = classNames;
+      }
+    })();
+  }
+});
+
+// ../../../../packages/registry/class-names/dist/index.js
+var import_classnames = __toESM(require_classnames(), 1);
+var getClassName = ({
+  className,
+  modifiers = {},
+  rootClass,
+  styles = {}
+}) => {
+  function getModifiers() {
+    const updatedModifiers = {};
+    const modifierKeys = Object.keys(modifiers);
+    if (modifierKeys.length) {
+      modifierKeys.forEach((modKey) => {
+        const classKey = `${rootClass}--${modKey}`;
+        const newClassName = styles[classKey] || classKey;
+        updatedModifiers[newClassName] = modifiers[modKey] ?? false;
+      });
+    }
+    return updatedModifiers;
+  }
+  function getChildClass(childClassName) {
+    const classKey = `${rootClass}__${childClassName}`;
+    return styles[classKey] || classKey;
+  }
+  function getRootStyles() {
+    return (0, import_classnames.default)(
+      className,
+      {
+        ...getModifiers()
+      },
+      styles[rootClass] || rootClass
+    );
+  }
+  return [getRootStyles(), getChildClass];
+};
+
+// icon.module.scss
+var icon_module_default = {
+  "BHT__Icon": "BHT__Icon",
+  "BHT__Icon--sm": "BHT__Icon--sm",
+  "BHT__Icon--md": "BHT__Icon--md",
+  "BHT__Icon--lg": "BHT__Icon--lg",
+  "BHT__Icon--xl": "BHT__Icon--xl"
+};
+
+// create-icon.tsx
+import { jsx } from "react/jsx-runtime";
+function createIcon(displayName, children) {
+  const Component = ({ size = "md", className, ...rest }) => {
+    const [rootClass] = getClassName({
+      className,
+      rootClass: "BHT__Icon",
+      modifiers: { [size]: true },
+      styles: icon_module_default
+    });
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ...rest,
+        className: rootClass,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children
+      }
+    );
+  };
+  Component.displayName = displayName;
+  return Component;
+}
+
+// icons/close.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CloseIcon = /* @__PURE__ */ createIcon(
+  "CloseIcon",
+  /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18M6 6l12 12" })
+);
+
+// icons/chevron-up.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ChevronUpIcon = /* @__PURE__ */ createIcon(
+  "ChevronUpIcon",
+  /* @__PURE__ */ jsx3("path", { d: "M18 15l-6-6-6 6" })
+);
+
+// icons/chevron-down.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ChevronDownIcon = /* @__PURE__ */ createIcon(
+  "ChevronDownIcon",
+  /* @__PURE__ */ jsx4("path", { d: "M6 9l6 6 6-6" })
+);
+
+// icons/pencil.tsx
+import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
+var PencilIcon = /* @__PURE__ */ createIcon(
+  "PencilIcon",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M12 20h9" }),
+    /* @__PURE__ */ jsx5("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" })
+  ] })
+);
+
+// icons/trash.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var TrashIcon = /* @__PURE__ */ createIcon(
+  "TrashIcon",
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx6("path", { d: "M3 6h18" }),
+    /* @__PURE__ */ jsx6("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
+    /* @__PURE__ */ jsx6("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" }),
+    /* @__PURE__ */ jsx6("path", { d: "M10 11v6" }),
+    /* @__PURE__ */ jsx6("path", { d: "M14 11v6" })
+  ] })
+);
+
+// icons/box.tsx
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var BoxIcon = /* @__PURE__ */ createIcon(
+  "BoxIcon",
+  /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx7("path", { d: "M21 8 12 3 3 8l9 5 9-5Z" }),
+    /* @__PURE__ */ jsx7("path", { d: "M3 8v8l9 5 9-5V8" }),
+    /* @__PURE__ */ jsx7("path", { d: "M12 13v8" })
+  ] })
+);
+
+// icons/upload.tsx
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var UploadIcon = /* @__PURE__ */ createIcon(
+  "UploadIcon",
+  /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsx8("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx8("path", { d: "M17 8l-5-5-5 5" }),
+    /* @__PURE__ */ jsx8("path", { d: "M12 3v12" })
+  ] })
+);
+
+// icons/bold.tsx
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var BoldIcon = /* @__PURE__ */ createIcon(
+  "BoldIcon",
+  /* @__PURE__ */ jsxs5(Fragment5, { children: [
+    /* @__PURE__ */ jsx9("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }),
+    /* @__PURE__ */ jsx9("path", { d: "M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })
+  ] })
+);
+
+// icons/italic.tsx
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var ItalicIcon = /* @__PURE__ */ createIcon(
+  "ItalicIcon",
+  /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    /* @__PURE__ */ jsx10("path", { d: "M19 4h-9" }),
+    /* @__PURE__ */ jsx10("path", { d: "M14 20H5" }),
+    /* @__PURE__ */ jsx10("path", { d: "M15 4 9 20" })
+  ] })
+);
+
+// icons/list.tsx
+import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var ListIcon = /* @__PURE__ */ createIcon(
+  "ListIcon",
+  /* @__PURE__ */ jsxs7(Fragment7, { children: [
+    /* @__PURE__ */ jsx11("path", { d: "M8 6h13" }),
+    /* @__PURE__ */ jsx11("path", { d: "M8 12h13" }),
+    /* @__PURE__ */ jsx11("path", { d: "M8 18h13" }),
+    /* @__PURE__ */ jsx11("path", { d: "M3 6h.01" }),
+    /* @__PURE__ */ jsx11("path", { d: "M3 12h.01" }),
+    /* @__PURE__ */ jsx11("path", { d: "M3 18h.01" })
+  ] })
+);
+
+// icons/link.tsx
+import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var LinkIcon = /* @__PURE__ */ createIcon(
+  "LinkIcon",
+  /* @__PURE__ */ jsxs8(Fragment8, { children: [
+    /* @__PURE__ */ jsx12("path", { d: "M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3" }),
+    /* @__PURE__ */ jsx12("path", { d: "M8 12h8" })
+  ] })
+);
+
+// icons/image.tsx
+import { Fragment as Fragment9, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var ImageIcon = /* @__PURE__ */ createIcon(
+  "ImageIcon",
+  /* @__PURE__ */ jsxs9(Fragment9, { children: [
+    /* @__PURE__ */ jsx13("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx13("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+    /* @__PURE__ */ jsx13("path", { d: "M21 15l-5-5L5 21" })
+  ] })
+);
+
+// icons/file-text.tsx
+import { Fragment as Fragment10, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var FileTextIcon = /* @__PURE__ */ createIcon(
+  "FileTextIcon",
+  /* @__PURE__ */ jsxs10(Fragment10, { children: [
+    /* @__PURE__ */ jsx14("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2Z" }),
+    /* @__PURE__ */ jsx14("path", { d: "M14 2v6h6" }),
+    /* @__PURE__ */ jsx14("path", { d: "M16 13H8" }),
+    /* @__PURE__ */ jsx14("path", { d: "M16 17H8" }),
+    /* @__PURE__ */ jsx14("path", { d: "M10 9H8" })
+  ] })
+);
+
+// icons/ellipse.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var EllipseIcon = /* @__PURE__ */ createIcon(
+  "EllipseIcon",
+  /* @__PURE__ */ jsx15("ellipse", { cx: "12", cy: "12", rx: "10", ry: "7" })
+);
+
+// icons/rectangle.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var RectangleIcon = /* @__PURE__ */ createIcon(
+  "RectangleIcon",
+  /* @__PURE__ */ jsx16("rect", { x: "2", y: "5", width: "20", height: "14", rx: "1" })
+);
+
+// icons/polygon.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var PolygonIcon = /* @__PURE__ */ createIcon(
+  "PolygonIcon",
+  /* @__PURE__ */ jsx17("path", { d: "M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z" })
+);
+
+// icons/cursor.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var CursorIcon = /* @__PURE__ */ createIcon(
+  "CursorIcon",
+  /* @__PURE__ */ jsx18("path", { d: "M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" })
+);
+
+// icons/label.tsx
+import { Fragment as Fragment11, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+var LabelIcon = /* @__PURE__ */ createIcon(
+  "LabelIcon",
+  /* @__PURE__ */ jsxs11(Fragment11, { children: [
+    /* @__PURE__ */ jsx19("path", { d: "M12 4v16" }),
+    /* @__PURE__ */ jsx19("path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" }),
+    /* @__PURE__ */ jsx19("path", { d: "M9 20h6" })
+  ] })
+);
+
+// icons/camp-border.tsx
+import { Fragment as Fragment12, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+var CampBorderIcon = /* @__PURE__ */ createIcon(
+  "CampBorderIcon",
+  /* @__PURE__ */ jsxs12(Fragment12, { children: [
+    /* @__PURE__ */ jsx20("path", { d: "M5 3a2 2 0 0 0-2 2" }),
+    /* @__PURE__ */ jsx20("path", { d: "M19 3a2 2 0 0 1 2 2" }),
+    /* @__PURE__ */ jsx20("path", { d: "M21 19a2 2 0 0 1-2 2" }),
+    /* @__PURE__ */ jsx20("path", { d: "M5 21a2 2 0 0 1-2-2" }),
+    /* @__PURE__ */ jsx20("path", { d: "M9 3h1" }),
+    /* @__PURE__ */ jsx20("path", { d: "M9 21h1" }),
+    /* @__PURE__ */ jsx20("path", { d: "M14 3h1" }),
+    /* @__PURE__ */ jsx20("path", { d: "M14 21h1" }),
+    /* @__PURE__ */ jsx20("path", { d: "M3 9v1" }),
+    /* @__PURE__ */ jsx20("path", { d: "M21 9v1" }),
+    /* @__PURE__ */ jsx20("path", { d: "M3 14v1" }),
+    /* @__PURE__ */ jsx20("path", { d: "M21 14v1" })
+  ] })
+);
+
+// icons/structure.tsx
+import { Fragment as Fragment13, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+var StructureIcon = /* @__PURE__ */ createIcon(
+  "StructureIcon",
+  /* @__PURE__ */ jsxs13(Fragment13, { children: [
+    /* @__PURE__ */ jsx21("path", { d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" }),
+    /* @__PURE__ */ jsx21("path", { d: "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" })
+  ] })
+);
+
+// icons/road.tsx
+import { Fragment as Fragment14, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+var RoadIcon = /* @__PURE__ */ createIcon(
+  "RoadIcon",
+  /* @__PURE__ */ jsxs14(Fragment14, { children: [
+    /* @__PURE__ */ jsx22("path", { d: "M4 19l4-14" }),
+    /* @__PURE__ */ jsx22("path", { d: "M16 5l4 14" }),
+    /* @__PURE__ */ jsx22("path", { d: "M12 8v-2" }),
+    /* @__PURE__ */ jsx22("path", { d: "M12 13v-2" }),
+    /* @__PURE__ */ jsx22("path", { d: "M12 18v-2" })
+  ] })
+);
+
+// icons/restroom.tsx
+import { Fragment as Fragment15, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+var RestroomIcon = /* @__PURE__ */ createIcon(
+  "RestroomIcon",
+  /* @__PURE__ */ jsxs15(Fragment15, { children: [
+    /* @__PURE__ */ jsx23("circle", { cx: "6.5", cy: "4", r: "2" }),
+    /* @__PURE__ */ jsx23("path", { d: "M3.5 14 6.5 8l3 6z" }),
+    /* @__PURE__ */ jsx23("path", { d: "M5 14v7" }),
+    /* @__PURE__ */ jsx23("path", { d: "M8 14v7" }),
+    /* @__PURE__ */ jsx23("circle", { cx: "17.5", cy: "4", r: "2" }),
+    /* @__PURE__ */ jsx23("path", { d: "M14.5 14 17.5 8l3 6z" }),
+    /* @__PURE__ */ jsx23("path", { d: "M16 14v7" }),
+    /* @__PURE__ */ jsx23("path", { d: "M19 14v7" })
+  ] })
+);
+
+// icons/registry.ts
+var iconRegistry = {
+  close: CloseIcon,
+  "chevron-up": ChevronUpIcon,
+  "chevron-down": ChevronDownIcon,
+  pencil: PencilIcon,
+  trash: TrashIcon,
+  box: BoxIcon,
+  upload: UploadIcon,
+  bold: BoldIcon,
+  italic: ItalicIcon,
+  list: ListIcon,
+  link: LinkIcon,
+  image: ImageIcon,
+  "file-text": FileTextIcon,
+  ellipse: EllipseIcon,
+  rectangle: RectangleIcon,
+  polygon: PolygonIcon,
+  cursor: CursorIcon,
+  label: LabelIcon,
+  "camp-border": CampBorderIcon,
+  structure: StructureIcon,
+  road: RoadIcon,
+  restroom: RestroomIcon
+};
+
+// icon.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var Icon = ({ name, ...rest }) => {
+  const Glyph = iconRegistry[name];
+  return /* @__PURE__ */ jsx24(Glyph, { ...rest });
+};
+export {
+  BoldIcon,
+  BoxIcon,
+  CampBorderIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CloseIcon,
+  CursorIcon,
+  EllipseIcon,
+  FileTextIcon,
+  Icon,
+  ImageIcon,
+  ItalicIcon,
+  LabelIcon,
+  LinkIcon,
+  ListIcon,
+  PencilIcon,
+  PolygonIcon,
+  RectangleIcon,
+  RestroomIcon,
+  RoadIcon,
+  StructureIcon,
+  TrashIcon,
+  UploadIcon,
+  createIcon
+};
+/*! Bundled license information:
+
+classnames/index.js:
+  (*!
+  	Copyright (c) 2018 Jed Watson.
+  	Licensed under the MIT License (MIT), see
+  	http://jedwatson.github.io/classnames
+  *)
+*/

package/docs.json

@@ -0,0 +1,68 @@
+{
+  "$schema": "https://github.com/behivetech/bht-component-registry/docs.schema.json",
+  "version": 2,
+  "generatedAt": "2026-10-23T16:58:35.576Z",
+  "docs": [
+    {
+      "displayName": "Icon",
+      "description": "Renders any icon by name.\n\nConvenient when the icon is chosen at runtime — a toolbar built from config,\nsay — but the lookup is dynamic, so a bundler cannot know which glyphs are\nreachable and this pulls in the entire set. Import the icon you want\n(`import { BoxIcon } from \"@behivetech/atoms.icon\"`, or\n`\"@behivetech/atoms.icon/box\"`) wherever the name is known at build time.",
+      "extendsNative": true,
+      "props": [
+        {
+          "name": "name",
+          "type": "enum",
+          "required": true,
+          "defaultValue": null,
+          "description": "Which icon to render"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Additional class names to merge with the component root element"
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\" | \"lg\" | \"xl\"",
+          "required": false,
+          "defaultValue": null,
+          "description": "Controls width/height; defaults to md"
+        }
+      ]
+    }
+  ],
+  "functions": [
+    {
+      "name": "createIcon",
+      "kind": "function",
+      "description": "Builds a single icon component from its glyph geometry.\n\nThis is the only module that imports the stylesheet, so the per-icon modules\nstay free of side effects and a consumer importing one icon pulls in one\nglyph rather than the whole set.",
+      "signatures": [
+        {
+          "text": "createIcon(displayName: string, children: ReactNode): IconComponent",
+          "params": [
+            {
+              "name": "displayName",
+              "type": "string",
+              "optional": false,
+              "defaultValue": null,
+              "description": ""
+            },
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "optional": false,
+              "defaultValue": null,
+              "description": ""
+            }
+          ],
+          "returns": {
+            "type": "IconComponent",
+            "description": ""
+          }
+        }
+      ],
+      "examples": []
+    }
+  ]
+}

package/icon.example.tsx

@@ -0,0 +1,65 @@
+import { BoxIcon, Icon, TrashIcon, type IconName } from "./index.js";
+
+const names: IconName[] = [
+  "close",
+  "chevron-up",
+  "chevron-down",
+  "pencil",
+  "trash",
+  "box",
+  "upload",
+  "bold",
+  "italic",
+  "list",
+  "link",
+  "image",
+  "file-text",
+];
+
+const mapEditorNames: IconName[] = [
+  "ellipse",
+  "rectangle",
+  "polygon",
+  "cursor",
+  "label",
+  "camp-border",
+  "structure",
+  "road",
+  "restroom",
+];
+
+export const AllIcons = () => (
+  <div style={{ display: "flex", gap: "0.75rem" }}>
+    {names.map((name) => (
+      <Icon key={name} name={name} />
+    ))}
+  </div>
+);
+
+export const MapEditorIcons = () => (
+  <div style={{ display: "flex", gap: "0.75rem" }}>
+    {mapEditorNames.map((name) => (
+      <Icon key={name} name={name} />
+    ))}
+  </div>
+);
+
+/** The size these are actually used at in an icon-only toolbar. */
+export const MapEditorIconsAtToolbarSize = () => (
+  <div style={{ display: "flex", gap: "0.75rem" }}>
+    {mapEditorNames.map((name) => (
+      <Icon key={name} name={name} size="sm" />
+    ))}
+  </div>
+);
+
+export const SmallIcon = () => <Icon name="trash" size="sm" />;
+export const LargeIcon = () => <Icon name="trash" size="lg" />;
+
+/** The tree-shakeable form: import the glyph, not the set. */
+export const DirectIconImports = () => (
+  <div style={{ display: "flex", gap: "0.75rem" }}>
+    <BoxIcon />
+    <TrashIcon size="lg" />
+  </div>
+);

package/icon.module.scss

@@ -0,0 +1,24 @@
+.BHT__Icon {
+  display: inline-block;
+  flex-shrink: 0;
+
+  &--sm {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &--md {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  &--lg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  &--xl {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+}

package/icon.tsx

@@ -0,0 +1,23 @@
+import { type IconBaseProps } from "./create-icon.js";
+import { iconRegistry } from "./icons/registry.js";
+
+export type IconName = keyof typeof iconRegistry;
+
+export interface IconProps extends Omit<IconBaseProps, "name"> {
+  /** Which icon to render */
+  name: IconName;
+}
+
+/**
+ * Renders any icon by name.
+ *
+ * Convenient when the icon is chosen at runtime — a toolbar built from config,
+ * say — but the lookup is dynamic, so a bundler cannot know which glyphs are
+ * reachable and this pulls in the entire set. Import the icon you want
+ * (`import { BoxIcon } from "@behivetech/atoms.icon"`, or
+ * `"@behivetech/atoms.icon/box"`) wherever the name is known at build time.
+ */
+export const Icon = ({ name, ...rest }: IconProps) => {
+  const Glyph = iconRegistry[name];
+  return <Glyph {...rest} />;
+};

package/index.ts

@@ -0,0 +1,11 @@
+// Per-icon components — the tree-shakeable path. Each lives in its own module
+// and is built with a /*#__PURE__*/ annotation, so importing one glyph costs
+// one glyph.
+export * from "./icons/index.js";
+
+export { createIcon } from "./create-icon.js";
+export type { IconBaseProps, IconComponent, IconSize } from "./create-icon.js";
+
+// Name-keyed convenience API. Pulls in every glyph; see the note on `Icon`.
+export { Icon } from "./icon.js";
+export type { IconProps, IconName } from "./icon.js";