Quick Start

Learn how to install and configure the @yh-ui/icons icon library.

Installation

# Using pnpm
pnpm add @yh-ui/icons @iconify/vue

# Using npm
npm install @yh-ui/icons @iconify/vue

# Using yarn
yarn add @yh-ui/icons @iconify/vue

Configure Vite

To achieve on-demand loading and optimal performance, configure unplugin-icons in your vite.config.ts:

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import { collections } from '@iconify/json'

export default defineConfig({
  plugins: [
    vue(),
    Icons({
      compiler: 'vue3',
      // Automatically install icon sets
      autoInstall: true,
      // Enable required icon sets
      collections: {
        mdi: collections.get('mdi'),     // Material Design Icons
        ep: collections.get('ep'),       // Element Plus
        lucide: collections.get('lucide'), // Lucide
        tabler: collections.get('tabler'), // Tabler Icons
        ri: collections.get('ri'),       // Remix Icon
      }
    })
  ]
})

Usage

Basic Usage

Basic Usage

Props

Property	Type	Default	Description
name	string	''	Icon name, supports the prefix:icon-name format.
icon	string	''	Icon name (equivalent to name, but with higher priority).
size	number | string	undefined	Icon size, e.g., 24 or '2em'.
color	string	undefined	Icon color, e.g., '#409EFF' or 'red'.
spin	boolean	false	Whether to show a spin animation.
rotate	number	0	Rotation angle; options include 90, 180, 270.

Icon Name Formats

Supports multiple icon name formats:

Icon Name Formats

Example: Common Icons

Common Icons

Custom Size and Color

Custom Size and Color

Rotation and Animation

Rotation and Animation

Advantages of On-demand Loading

Performance Comparison

Import Method	Bundle Size	Request Count
Full Import (All Icons)	~500KB+	0 (Built-in)
On-demand Loading (Used Icons Only)	~5-20KB	0 (At Build-time)

How It Works

1. Development: Only icons used in the code are loaded.
2. Production: Only the SVG code for icons actually used is bundled.
3. Tree-shaking: Unused icons are completely removed.

Example Result

// If you only use these icons
import { Icon } from '@yh-ui/icons/vue'

// After compilation, it will only include the SVG code for these 3 icons
<Icon name="mdi:home" />
<Icon name="ep:search" />
<Icon name="lucide:settings" />

FAQ

1. Icons Not Showing?

Ensure:

1. Icon sets are enabled in vite.config.ts.
2. The icon name format is correct (e.g., mdi:home).
3. The @iconify/vue dependency is installed.

2. How to Search for Icons?

Visit the Iconify Icon Library to search for icons.

3. Performance Optimization Suggestions

• Only enable the icon sets your project needs.
• Use Tree-shaking friendly import methods.
• Avoid dynamic icon name concatenation.