Docs / Components
SenseIconComponent
The suite's one way to draw an icon: any of the vendored Lucide catalogue (@artificialsenselabs/icons) or ui's semantic aliases, as inline SVG coloured by currentColor. Import from @artificialsenselabs/ui.
Live demo: run nx serve showcase and open /components/icon (port 4202).
Overview
Category: Display / primitives. Selector: sense-icon. Import: import { SenseIconComponent } from '@artificialsenselabs/ui';
name is required and typed SenseIconName: a catalogue name or a ui alias, so a typo fails the build. Aliases (close, warning, chevron-inline-start, …) are always available. Catalogue names are registered once per app or route with provideSenseIcons, which keeps every other glyph out of the bundle. No ADR-0030 variant — icons are not interactive surfaces. Design record: ADR-0060.
// app.config.ts
import { senseIconCalendar } from '@artificialsenselabs/icons';
import { provideSenseIcons } from '@artificialsenselabs/ui';
providers: [provideSenseIcons(senseIconCalendar)]<sense-icon name="calendar" />
<sense-icon name="search" size="sm" ariaLabel="Search" />API
Generated from libs/ui/src/lib/icon/sense-icon/sense-icon.component.ts — run pnpm run docs:api to refresh.
| Input | Type | Default | Description |
|---|---|---|---|
name | SenseIconName | required | Required glyph name: a catalogue name or a ui alias. |
size | SenseIconSize | 'md' | Scale token (`md` default). |
ariaLabel | string | null | null | Accessible name when not decorative. |
spin | boolean | false | Force spin (auto for `spinner`). |
Accessibility
- Decorative icons set
aria-hidden="true"on host and SVG. - Labelled icons expose
role="img"andaria-label. - Prefer parent control labels (e.g.
sense-button) over per-icon labels in composites. - Spin animation pauses under
prefers-reduced-motion: reduce.