@hmfw/icons

@hmfw/icons

基于 Ant Design 的 Vue 3 图标组件库 —— 681 个高质量 SVG 图标，全面支持 Tree Shaking。

特性

• 🎨 681 个图标 —— 完整覆盖 Ant Design 图标集
• 🌲 Tree Shaking —— 每个图标独立文件，按需引入，零冗余
• 🔄 旋转动画 —— 内置 spin（持续旋转）与 rotate（指定角度）属性
• 🔍 内置搜索 —— 支持中英文关键词搜索、按分类筛选
• 📦 双模式构建 —— ESM（支持 tree-shaking）+ UMD（CDN 直接引入）
• 💪 TypeScript —— 完整类型定义，每个图标组件独立 .d.ts
• ⚡ 轻量高效 —— 函数式组件，零运行时开销

安装

pnpm add @hmfw/icons

要求：Vue >= 3.3.0，Node >= 18

使用

按需引入（推荐）

<script setup>
import { HomeOutlined, BellFilled, LoadingOutlined } from '@hmfw/icons'
</script>

<template>
  <HomeOutlined />
  <BellFilled style="color: #1677ff; font-size: 24px" />
  <LoadingOutlined spin />
</template>

每个图标渲染为 <span class="anticon anticon-{name}" role="img"><svg>…</svg></span>。 外层 span 接收透传的 class、style、事件（如 @click）等属性，svg 固定 1em 尺寸并继承 currentColor。

旋转：spin 与 rotate

<script setup>
import { LoadingOutlined, ArrowUpOutlined } from '@hmfw/icons'
</script>

<template>
  <!-- 持续旋转（loading 场景） -->
  <LoadingOutlined spin />

  <!-- 旋转指定角度：90、180、-90 … -->
  <ArrowUpOutlined :rotate="90" />
</template>

旋转所需的 CSS（.anticon 基类与 @keyframes）在图标首次渲染时由 JS 自动注入，无需手动引入样式文件；SSR 环境下自动跳过注入。

搜索图标

import { searchIcons } from '@hmfw/icons'

// 按关键词搜索
const results = searchIcons('home')
// [{ name: 'home', component: HomeOutlined, category: '网站通用', keywords: [...], score: 10 }]

// 中文搜索
searchIcons('设置')   // → setting 相关图标
searchIcons('删除')   // → delete 相关图标

按分类获取

import { getIconsByCategory, getAllCategories } from '@hmfw/icons'

// 获取所有分类
const categories = getAllCategories()
// ['方向指示', '品牌标识', '提示建议', '编辑操作', ...]

// 获取某个分类下的所有图标
const editIcons = getIconsByCategory('编辑操作')

CDN 引入

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/@hmfw/icons/dist/hmfw-icons.umd.global.js"></script>
<script>
  // 全局变量 HmfwIcons
  const { HomeOutlined, BellFilled } = HmfwIcons
</script>

精准导入（最优 Tree Shaking）

import { HomeOutlined } from '@hmfw/icons/icons/HomeOutlined'

图标分类

图标命名规则

• 线框风格：ArrowUpOutlined、HomeOutlined
• 实底风格：ArrowUpFilled、HomeFilled
• 对应 SVG 文件：arrow-up.svg、arrow-up-filled.svg

本地开发

# 安装依赖
pnpm install

# 添加/修改图标：将 SVG 放入 svg/ 目录

# 生成图标组件
pnpm gen:icons

# 生成图标元数据
pnpm gen:icon-metadata

# 运行测试
pnpm test

# 构建
pnpm build

构建流程

SVG 文件 (svg/)
    │
    ├── scripts/generate-icons.ts ──→ icons/  (组件代码)
    └── scripts/generate-icon-metadata.ts ──→ metadata.ts (分类/关键词)
                    │
                    ▼
              tsup 编译
                    │
            ┌───────┴───────┐
            ▼               ▼
      dist/icons/*.js   dist/hmfw-icons.umd.global.js
      (ESM 独立文件)      (UMD 单文件)

License

MIT © hmfw