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 as inline SVG during SSR, with no extra network requests on first paint.
• Size, color, and rotation styles are preserved between server render and client hydration.
• Spin animation is controlled by CSS and becomes active immediately after hydration.
• The component remains auto-import friendly in Nuxt projects.

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	''
icon	Custom Vue icon component	Component	undefined
size	Icon size	number | string	undefined
color	Icon color	string	undefined
spin	Whether to spin in a loop	boolean	false
rotate	Rotation angle	number	0
theme-overrides	Theme variable overrides	ComponentThemeVars	undefined

Events

This component does not expose component events.

Slots

Slot Name	Description	Parameters
default	Custom SVG content	-

Expose

This component does not expose public instance methods or properties.

Theme Variables

YhIcon supports themeOverrides and primarily consumes global theme tokens. This component does not provide additional dedicated component-level CSS variables.

Type Exports

Name	Description
YhIconProps	Props type for YhIcon
YhIconSlots	Slots type for YhIcon
YhIconData	Icon data structure type
YhIconSet	Built-in icon set type
YhIconInstance	Public instance type for YhIcon