API and Development
Icon from @prepared911/ui/icon paints a glyph with currentColor. Import the glyph from @prepared911/ui/icons/<name> or from the @prepared911/ui/icons barrel. There is no SVGAsset enum. Paint color uses Text's foreground prop (Foreground from @prepared911/ui/text); default Foreground.Inherit leaves color to the surrounding text. size is IconSize (ExtraSmall, 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). spin is the system loading turn. There is no style prop, no native color attribute, and no morph prop.
Import a glyph from its own subpath, or by name from the @prepared911/ui/icons barrel. Both give the same Glyph constant.
import * as glyphs from "@prepared911/ui/icons") keeps all of them. Module Federation remotes may import either form; the shell shares the barrel when remotes use it.
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, 1px at 16px, and 0.75px at 12px. 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. |
foreground | Foreground | Foreground.Inherit | Paint color, from the same {@link Foreground} enum as Text. Members with an icon rung bind --color-icon-*
(Default, Subtle, Muted, Disabled, OnAccent and the Transient* members); Link, Accent,
AccentStrong and the status members bind the same --color-fg-link, --color-accent-fg* and
--color-status-*-fg tokens Text uses. {@link Foreground.Inherit} sets no color, so the glyph takes the
surrounding text color. |
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. Glyphs come from @prepared911/ui/icons/<name> or from @prepared911/ui/icons. 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. Page-level reduced motion is useReducedMotion from @prepared911/ui. spin is the continuous loader rotation and stops under reduced motion (Props Spin). rotation is quarter-turn steps only (Props Rotation). Foreground members are in Props ForegroundMatrix.
Decorative medium icon with inherited color:
foreground selects a Foreground token. Foreground.Inherit (default) sets no class, so the glyph follows the surrounding text color.
IconSize maps to --icon-xs (12px), --icon-sm (16px), --icon-md (20px, default), and --icon-lg (24px). There is no 32px or 48px member; see Props SizeMatrix.
Text run that wraps them (Composition InContext):