Icon
Semantic vector graphics.
Basic Usage
Use the name attribute to specify the icon.
Basic Usage
Different Sizes
You can control the icon size via the size attribute. Supports numbers (pixels) and strings (CSS units).
Different Sizes
Spin Animation
The spin attribute can be used to make the icon rotate, commonly used for loading states.
Spin Animation
Custom SVG
Supports passing SVG path content directly via the svg attribute or using the default slot.
Custom SVG
Use in Nuxt
Icon component integration in Nuxt 3/4 is very simple. Since the Icon is based on lightweight inline SVG rendering, the complete vector graphics code can be generated during the SSR phase.
Use in Nuxt
SSR Notes:
- ✅ Built-in icons are rendered directly on the server as concise SVG paths, no network requests on first screen.
- ✅ Size and color are correctly positioned on the server via inline styles.
- ✅ Spin animation is kept in motion (or ready on first screen) on the server via CSS animation.
- ✅ Auto-import support enhances development efficiency.
Vector Benefits
Compared to icon fonts, YH-UI's SVG Icon solution is more in line with modern web standards and avoids common font loading flicker (FOIT/FOUT) issues in SSR.
API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| name | Icon name (built-in set) | string | — |
| svg | Custom SVG content (excluding <svg> tag) | string | — |
| size | Icon size | number | string | — |
| color | Icon color | string | currentColor |
| spin | Whether to spin in a loop | boolean | false |
| rotate | Rotation angle | number | 0 |
Slots
| Slot Name | Description |
|---|---|
| default | Custom SVG content |