API

Complete API documentation, including components, types, and functions.

YhIcon Component

Props

Property	Description	Type	Default
name	Icon name, supports the prefix:icon-name format.	string	''
icon	Icon name (equivalent to name, but with higher priority).	string	''
svg	Custom SVG string (excluding the <svg> tag, automatically sanitized against XSS).	string	''
component	Vue component	Component	undefined
size	Icon size	number | string	undefined
color	Icon color	string	undefined
spin	Whether to show a spin animation.	boolean	false
rotate	Rotation angle (0, 90, 180, 270).	number	0

Slots

Slot Name	Description
default	Custom icon content.

Events

No native events; supports transparent transmission of all native attributes.

Usage Examples

YhIcon Component Usage

Icon Component

An alias for YhIcon, fully compatible.

Icon Component Usage

Type Definitions

IconName

Icon name type.

type IconName = string

Supported formats:

• Short name: 'home'
• With prefix: 'mdi:home'
• Slash separator: 'mdi/home'

IconSize

Icon size type.

type IconSize = number | string

Examples:

• Number: 24
• Pixel string: '24px'
• CSS unit: '2em'

IconColor

Icon color type.

type IconColor = string

Examples:

• Hexadecimal: '#409EFF'
• Color name: 'red'
• CSS variable: 'var(--yh-color-primary)'

IconRotate

Icon rotation angle type.

type IconRotate = 0 | 90 | 180 | 270

IconProps

Props type for the icon component.

interface IconProps {
  name?: IconName
  icon?: IconName
  svg?: string
  component?: Component
  size?: IconSize
  color?: IconColor
  spin?: boolean
  rotate?: IconRotate
}

IconCollection

Icon collection configuration type.

interface IconCollection {
  name: string
  prefix: string
  author?: string
  license?: string
  total: number
}

IconPreset

Icon preset type.

interface IconPreset {
  name: string
  prefix: string
  count: number
  description?: string
}

Utility Functions

parseIconName

Parses an icon name into the standard format.

function parseIconName(name: string): string

Parameters:

• name: Icon name

Return Value: The parsed icon name.

Example:

import { parseIconName } from '@yh-ui/icons'

parseIconName('home') // 'mdi:home'
parseIconName('mdi:home') // 'mdi:home'
parseIconName('mdi/home') // 'mdi:home'

canResolve

Synchronously checks whether the icon format can be resolved.

function canResolve(name: string): boolean

Parameters:

• name: Icon name

Return Value: Whether it matches the resolvable format.

Example:

import { canResolve } from '@yh-ui/icons'

console.log(canResolve('mdi:home')) // true
console.log(canResolve('invalid-format')) // false

iconExists

Checks if an icon exists.

async function iconExists(name: string): Promise<boolean>

Parameters:

• name: Icon name

Return Value: Whether the icon exists.

WARNING

Since iconExists depends on asynchronous loading from the remote Iconify API or local cache retrieval, it may be limited by unstable network conditions, timeouts, or instances where the icon has not yet loaded. Therefore, in business code, it is recommended to use iconExists only as a pre-check/heuristic validator, rather than the sole absolute proof of an icon's existence. Pair it with the format validation function canResolve and provide a reasonable fallback (such as a default icon or text warning) if the icon fails to load.

Example:

import { iconExists } from '@yh-ui/icons'

const exists = await iconExists('mdi:home')
console.log(exists) // true

getIconData

Retrieves the SVG data for an icon.

async function getIconData(name: string): Promise<IconifyIcon>

Parameters:

• name: Icon name

Return Value: The SVG data of the icon.

Example:

import { getIconData } from '@yh-ui/icons'

const iconData = await getIconData('mdi:home')
console.log(iconData)

getCollectionPrefixes

Retrieves a list of available icon set prefixes.

function getCollectionPrefixes(): string[]

Example:

import { getCollectionPrefixes } from '@yh-ui/icons'

const prefixes = getCollectionPrefixes()
console.log(prefixes) // ['mdi', 'ep', 'lucide', ...]

Constants

AVAILABLE_COLLECTIONS

A complete list of all available icon collections.

const AVAILABLE_COLLECTIONS = [
  { prefix: 'mdi', name: 'Material Design Icons', count: 7000 },
  { prefix: 'ep', name: 'Element Plus', count: 200 },
  { prefix: 'lucide', name: 'Lucide', count: 1500 }
  // ...
] as const

RECOMMENDED_COLLECTIONS

A list of recommended icon set prefixes.

const RECOMMENDED_COLLECTIONS = ['mdi', 'ep', 'lucide', 'tabler', 'ri'] as const

COMMON_ICONS

A mapping of common icon aliases.

const COMMON_ICONS = {
  'arrow-up': 'mdi:arrow-up',
  'arrow-down': 'mdi:arrow-down',
  close: 'mdi:close',
  check: 'mdi:check',
  search: 'mdi:magnify'
  // ...
} as const

Vue Component Auto-import

When used in Nuxt, components are automatically imported:

<template>
  <!-- No manual import required -->
  <YhIcon name="mdi:home" />
</template>

For detailed Nuxt integration, please refer to Using in Nuxt.