/** * The icon set, drawn to one rule. * * Shared SVG geometry rather than XML repeated in every component: one definition, one appearance, * whichever renderer draws it. * * ## The rule * * Every icon is on a **24 grid** with **stroke 2**, round caps and round joins. The live area is * **20 units, from 2 to 22** — nothing is drawn outside it, so no glyph crowds the edge of its box. * * Within that, a glyph belongs to one of three classes, and its class fixes how much of the live * area it fills: * * | class | span | icons | * | --- | --- | --- | * | **full** | 20 (2–22) | `CALENDAR`, `CLOCK`, `ERROR`, `LOADER` | * | **compact** | 14 (5–19) | `SEARCH`, `CHECKMARK`, `CLOSE`, `PLUS`, `MINUS` | * | **directional** | 12 (6–18) | `CHEVRON_*`, `SPIN_UP`, `SPIN_DOWN` | * * The classes exist because a chevron drawn 20 units wide stops reading as a chevron and starts * reading as a very large arrow, while a calendar drawn 12 wide loses the detail that makes it a * calendar. What must not vary — and what did — is the *stroke weight on screen*, and the size of * glyphs within one class. * * Both halves are asserted in `packages/core/test/icons.test.mjs`. That test is the point: a set * drifts one well-meant icon at a time, and this one had drifted into four grids with strokes * rendering between 1.20px and 2.00px at the same box size. * * Adding an icon means choosing its class and drawing to that span. If a glyph fits none of the * three, add a class here with its reason rather than drawing it to no rule at all. */ /** The grid every icon is drawn on. */ export declare const MDY_ICON_GRID = 24; /** The stroke every icon carries, in grid units. */ export declare const MDY_ICON_STROKE = 2; /** How much of the live area a glyph fills, by class. */ export declare const MDY_ICON_SPANS: Readonly<{ /** 2–22. A glyph with internal detail: a calendar's grid, a clock's hands. */ readonly full: 20; /** 5–19. A self-contained mark: a tick, a cross, a magnifier. */ readonly compact: 14; /** 6–18. A direction, not an object. */ readonly directional: 12; }>; export type MdyIconSpan = keyof typeof MDY_ICON_SPANS; export declare const MDY_ICONS: Readonly<{ readonly CALENDAR: Readonly<{ viewBox: "0 0 24 24"; span: "full"; content: ""; }>; readonly CLOCK: Readonly<{ viewBox: "0 0 24 24"; span: "full"; content: ""; }>; readonly ERROR: Readonly<{ viewBox: "0 0 24 24"; span: "full"; content: ""; }>; readonly LOADER: Readonly<{ viewBox: "0 0 24 24"; span: "full"; content: ""; }>; readonly KEYBOARD: Readonly<{ viewBox: "0 0 24 24"; span: "full"; content: ""; }>; readonly SEARCH: Readonly<{ viewBox: "0 0 24 24"; span: "compact"; content: ""; }>; readonly CHECKMARK: Readonly<{ viewBox: "0 0 24 24"; span: "compact"; content: ""; }>; readonly CLOSE: Readonly<{ viewBox: "0 0 24 24"; span: "compact"; content: ""; }>; readonly UNDO: Readonly<{ viewBox: "0 0 24 24"; span: "compact"; content: ""; }>; readonly PLUS: Readonly<{ viewBox: "0 0 24 24"; span: "compact"; content: ""; }>; readonly MINUS: Readonly<{ viewBox: "0 0 24 24"; span: "compact"; content: ""; }>; readonly CHEVRON_DOWN: Readonly<{ viewBox: "0 0 24 24"; span: "directional"; content: ""; }>; readonly CHEVRON_LEFT: Readonly<{ viewBox: "0 0 24 24"; span: "directional"; content: ""; }>; readonly CHEVRON_RIGHT: Readonly<{ viewBox: "0 0 24 24"; span: "directional"; content: ""; }>; readonly SPIN_UP: Readonly<{ viewBox: "0 0 24 24"; span: "directional"; content: ""; }>; readonly SPIN_DOWN: Readonly<{ viewBox: "0 0 24 24"; span: "directional"; content: ""; }>; }>; export type MdyIconName = keyof typeof MDY_ICONS;