Icon
Icons are a fundamental visual element that aid quick recognition and navigation. Diwa uses the Lucide icon set — a consistent, open-source library built on a 24×24 grid with 2px strokes.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
name | string | 'circle' | Lucide icon name in kebab-case (e.g. "arrow-right", "trash-2"). Full list at lucide.dev/icons. |
size | number | 24 | Width and height of the rendered SVG in pixels. Recommended values: 16, 20, 24, 32, 48. |
color | string | 'currentColor' | SVG stroke color. Accepts any valid CSS color value. Defaults to the inherited text color. |
label | string | undefined | undefined | Accessible label for semantic icons. When set, the SVG receives role="img" and aria-label. When omitted, aria-hidden="true" is applied. |
theme | 'dark' | 'light' | 'dark' | Per-component theme override. Reflects data-theme onto the host element so CSS token overrides cascade into the Shadow DOM. |
Events
diwa-icon is non-interactive and emits no events.
CSS custom properties
The component itself has no internal CSS custom property API. Style the icon via the color prop or by setting color / font-size on a parent element (since currentColor inherits).
Shadow DOM
diwa-icon uses an encapsulated Shadow DOM with the host style display: inline-flex; align-items: center; justify-content: center; line-height: 0. This makes the element behave as an inline-replaceable element that aligns correctly with adjacent text.