Icon @astryx-svelte/core v0.3.0 · Icon
Usage
Icons are small visual symbols that represent actions, objects, or concepts. They improve scannability and reinforce meaning alongside text. Supports both direct SVG components and semantic icon names that adapt to the active theme.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use semantic icon names when available; they adapt to theme changes automatically. |
| Do | Libraries can augment the icon map with their own keys: registerIcons({'richtext:bold': <MyIcon />}) accepts arbitrary extension keys (not just the built-in IconName set). Resolve them with getExtendedIcon(key, fallback), which prefers a theme-registered icon and falls back to a bundled default — the seam that makes library-shipped icons theme-overridable. |
| Do | Pair icons with text labels for accessibility; icon-only elements need an accessible label. |
| Do | For a meaningful standalone icon (no adjacent text), give it an accessible name via the label prop: it sets role="img" + aria-label and unhides the icon. |
| Do | Use color tokens for icon colors, not hardcoded hex values. |
| Do | Be mindful of context; decorative icons in compact components can distract rather than help. |
| Don't | Use icons as the sole means of conveying meaning; always provide a text alternative. |
| Don't | Resize icons with arbitrary pixel values; use the provided size props. |
| Don't | Mix icon styles (e.g. outline and filled) within the same context. |
| Don't | Render raw SVG elements; always wrap in Icon for consistent sizing and color. |
| Don't | Pass a name prop; Icon uses icon (not name) to specify which icon to render. |
Examples
Common configurations, variations, and states.Icon — Non-Semantic Colors
Non-semantic color palette for icons.
Icon — Semantic Colors
All semantic icon color variants with labels.
Icon — Size Variants
All icon sizes from extra-small to large.
Icon — Status Indicators
Status list using semantic icons for success, warning, error, and info.