Icon Collection Introduction

A high-performance icon library based on Iconify, supporting 100+ icon sets with on-demand loading and zero runtime overhead.

Features

• 🚀 High Performance - Uses unplugin-icons for build-time on-demand loading.
• 📦 Compact Size - Maximized Tree-shaking; only the icons you use are bundled.
• 🎨 100+ Icon Sets - Integrates with the Iconify ecosystem, offering over 200,000 icons.
• 🔧 Full Compatibility - Maintains compatibility with the existing YhIcon component API.
• 🌳 SSR Support - Supports Server-Side Rendering.

Basic Usage

Specify an icon using the icon property in the format prefix:icon-name.

Basic Usage

Different Sizes

Use the size property to set the icon dimension, supporting both numbers and strings.

Different Sizes

Custom Colors

Use the color property to set the icon color.

Custom Colors

Spin Animation

Use the spin property to rotate the icon, which is commonly used for loading states.

Spin Animation

Rotation Angle

Use the rotate property to set a static rotation angle for the icon.

Rotation Angle

Why Iconify?

Issues with Traditional Methods

Method	Disadvantage
Icon Font	Requires extra font file requests, SSR-unfriendly, difficult to control colors.
SVG Files	Each icon is a separate file, making management difficult.
Built-in Component Icons	Limited number of icons, difficult to extend.

Advantages of Iconify

• On-demand Loading: Bundles only the icons you use, minimizing bundle size.
• Unified API: Different icon sets use the same interface.
• Massive Selection: Over 200,000 icons available.
• Tree-shaking: Automatically removes unused icons.

Usage

Installation

npm install @yh-ui/icons

Usage in Vue

<script setup lang="ts">
import { Icon } from '@yh-ui/icons'
</script>

<template>
  <Icon icon="mdi:home" />
  <Icon icon="ep:search" />
  <Icon icon="mdi:loading" spin />
</template>

Recommended Icon Sets

Common icon set prefixes:

Prefix	Icon Set	Icon Count
mdi	Material Design Icons	6000+
ep	Element Plus	200+
lucide	Lucide	1500+
tabler	Tabler Icons	3000+
ri	Remix Icon	2000+
bi	Bootstrap Icons	1500+
fxemoji	Firefox Emoji	1000+

For more icon sets, please visit the Iconify Icon Library.