Icons
Use VuIcon with Iconify ion: ids only — no inline SVG; name icon-only controls.
Rules
- Use
icon="ion:…"only (for exampleion:heart-outline) - Place icons in slots (
start/end) or as stand-alone icons - Icon-only controls need an accessible name:
aria-labelor a visiblelabel - Agents can discover ids with MCP
search_icons
Do not inline SVG. That breaks theming, a11y, and tree-shaking conventions.
Across frameworks
import { VuButton } from "@velkin/react/button";
import { VuIcon } from "@velkin/react/icon";
<VuButton>
<VuIcon slot="start" icon="ion:save-outline" />
Save
</VuButton>
<VuButton aria-label="Settings" variant="ghost">
<VuIcon icon="ion:settings-outline" />
</VuButton>Common problems
| Problem | Fix |
|---|---|
| Icon missing or wrong set | Use an ion: id only; check MCP search_icons |
| Vue start/end icon not showing | Wrap VuIcon in #start / #end |
| Icon-only button fails a11y checks | Add aria-label (or visible text) |