图标集合

YH-UI Icons 现在同时支持两种用法：保留原有 Icon / YhIcon 的 Iconify 字符串写法，也新增了现代组件库风格的独立图标组件。你可以像使用普通 Vue 组件一样导入并渲染每一个图标。

基础用法

组件式图标

Iconify 兼容用法

原有功能保持不变。需要跨图标集时，继续使用 Icon 并传入 prefix:name。

Iconify 字符串图标

图标列表

点击图标卡片可复制导入语句和模板用法。

全部分类方向品牌业务通讯数据设备编辑反馈文件食品地图媒体对象系统时间用户天气

共 292 个组件图标

按需导入

<script setup lang="ts">
import { Search, Edit, Delete } from '@yh-ui/icons'
</script>

<template>
  <Search />
  <Edit :size="20" color="var(--yh-color-primary)" />
  <Delete />
</template>

全局注册

如果希望在业务模板里直接使用所有图标组件，可以在应用入口注册：

import { createApp } from 'vue'
import * as Icons from '@yh-ui/icons'
import App from './App.vue'

const app = createApp(App)

for (const [key, component] of Object.entries(Icons.iconComponents)) {
  app.component(key, component)
}

app.mount('#app')

API

所有独立图标组件都支持与 YhIcon 一致的视觉属性：

属性	说明	类型	默认值
size	图标尺寸	number | string	undefined
color	图标颜色	string	undefined
spin	是否旋转	boolean	false
rotate	静态旋转角度	number	0