Icon Glyph
Render an outline icon, natural emoji or fallback without entity or avatar semantics.
- Status
- Since
0.23.127- Accessibility pattern
- Decorative glyph or labelled image
Last updated
Install
Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Icon Glyph before installation. Retain the digest printed by this command.
pnpm exec vegastack-design verify icon-glyphInstall with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.
pnpm dlx shadcn@4.21.0 add @vegastack/icon-glyphRun the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.
The same command installs the registry items it composes: @vegastack/avatar, @vegastack/icon-components, @vegastack/icon-data.
Usage
import { IconGlyph } from "@/components/ui/icon-glyph";
<IconGlyph value={{ kind: "icon", name: "briefcase-business" }} hue="blue" />;Examples
Composition
Use this glyph in existing DS rows and input addons. The host owns fallback, identity, access labels and persistence. It renders no avatar tile, background or lock badge.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
fallback | React.ReactNode | — | Content shown when no known icon is available. |
hue | AvatarHue | null | — | Hue for outline icons or fallback text; emoji retain their own colours. Without one the glyph
takes the sidebar nav icon ink (sidebar-foreground at 70%). |
size | "default" | "lg" | "sm" | "xs" | "xs" | Glyph scale. |
value | IconValue | null | null | Chosen catalogue icon or natural emoji. |
Data attributes and CSS variables on IconGlyph
| Attribute | Values |
|---|---|
data-icon-tone | "" |
data-size | mirrors a prop or state value |
data-slot | "icon-glyph" |
Accessibility
| Contract | States tested |
|---|---|
| Behaviour | default, active, disabled, error, pressed, range, selected, success |
| Accessibility | disabled, keyboard, labeled, pressed |
| Visual | default, hover, error, success |
Decorative by default. Supply aria-label to expose a named image. Emoji preserve their natural colours; outline glyphs use semantic hue ink.