The typed inline SVG vocabulary shared by every component and widget in the library.
DecorativeLabelledSized
gaugeactivityservertabletreebell
A labelled icon is announced as “Server”; the swatches above are decorative.
<Icon name="server" label="Server" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Icon } from '@chanrg/4ui';<Icon name="server" label="Server" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | IconName | required | Typed icon identifier. |
label | string | — | Makes the icon meaningful to assistive technology. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Decorative icons are hidden; labelled icons expose image semantics.