API and Development
Icon from @prepared911/ui/icon paints a glyph with currentColor. Import the glyph from @prepared911/ui/icons/<name>. There is no SVGAsset enum and no color prop. size is IconSize (Small, Medium, Large). A meaningful icon takes label; a decorative icon omits it and is hidden from assistive tech. rotation is IconRotation (None, Quarter, Half, ThreeQuarter). There is no morph prop.
Lucide glyphs are centerlines (glyph.stroke). Icon paints those with fill="none", stroke="currentColor", round caps and joins, and stroke-width="1.5" in the 24 viewBox, so the stroke scales with the icon: 1.5px at 24px, 1.25px at 20px, and 1px at 16px. Figma fallbacks and custom glyphs stay fills (fill="currentColor", no stroke).
| Name | Type | Default | Description |
|---|---|---|---|
glyph | Glyph | — | The glyph to render. Import from @prepared911/ui/icons/<kebab-name>. |
className | string | — | Optional module class from colocated CSS. |
id | string | — | Element id. |
label | LocalizedMessage | — | Accessible name. Omit for a decorative icon, which gets aria-hidden="true" and no name.
A control that uses an icon as its only content still needs its own label; this prop does not supply one.
Callers pass a {@link LocalizedMessage}. |
ref | Ref<SVGSVGElement> | — | Ref to the rendered svg. |
rotation | IconRotation | IconRotation.None | Clockwise rotation of the glyph on this svg. Uses the CSS transform property so it composes with the RTL
directional mirror (scale). Transitions use --motion-state-move and respect reduced motion (the system setting or data-motion="reduced"). |
size | IconSize | IconSize.Medium | Size token. |
spin | boolean | false | Turns the glyph continuously, clockwise in screen space, for a loading indicator. The one spin animation of the design
system: Button's loading state, ActionButton and ConfirmMorph use it. The turn is the individual rotate property,
which composes outside the RTL mirror, so it stays clockwise in a right-to-left subtree even for a directional glyph.
Under reduced motion (the system setting or data-motion="reduced") the glyph stops turning and stays visible. Spin is decorative: it adds no role
or name, so the owner announces the busy state. |
Icon and IconSize come from @prepared911/ui/icon. Glyph modules come from @prepared911/ui/icons/<name>. IconSize stops at large (24px). An empty-state graphic is EmptyState, the product mark is BrandMark, and a picture (including an SVG file) is Image sized by a parent Box. Reduced motion for the page is useReducedMotion from @prepared911/ui. Icon itself does not take a morph prop; spin is the continuous loader rotation, and it is static under reduced motion.
There is no morph prop and no IconMorphTechnique. rotation is a quarter-turn step. spin is the loading rotation and stops under reduced motion.
pr-voice-animation class (keyframes ship with @prepared911/ui icon styles).