@yqg/slimfit-icons

语义化的矢量图形图标库，基于 Ant Design Icons，同时提供 300+ 自定义业务图标。支持 Tree-shaking，按需加载。

✨ 特性

• 🎨 300+ 自定义图标 - 涵盖通用、编辑、方向、交互、提示、货币等多种业务场景
• 📦 完整 AntD 图标 - 转发所有 Ant Design 官方图标
• 🌲 Tree-shaking 支持 - 仅打包使用到的图标，优化包体积
• 💪 TypeScript 支持 - 完整的类型定义
• 🔧 自定义图标工具 - 提供 createIcon 工具函数快速创建自定义图标

📦 安装

# npm
npm install @yqg/slimfit-icons

# yarn
yarn add @yqg/slimfit-icons

# pnpm
pnpm add @yqg/slimfit-icons

🔨 使用方式

基础用法

import { UserOutlined, Menu, Apps, Check } from '@yqg/slimfit-icons';

function App() {
  return (
    <div>
      {/* Ant Design 图标 */}
      <UserOutlined />
      
      {/* SlimFit 自定义图标 */}
      <Menu />
      <Apps />
      <Check />
    </div>
  );
}

使用 Icon 组件

import { Icon } from '@yqg/slimfit-icons';
import { ReactComponent as CustomSvg } from './custom.svg';

function App() {
  return (
    <Icon component={CustomSvg} style={{ fontSize: 24, color: '#1890ff' }} />
  );
}

创建自定义图标

import { createIcon } from '@yqg/slimfit-icons';

const MyCustomIcon = createIcon({
  name: 'MyCustomIcon',
  svg: () => (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
    </svg>
  ),
});

// 使用
<MyCustomIcon style={{ fontSize: 20 }} />

📂 图标分类

| 分类 | 说明 | 示例 | | --- | --- | --- | | common | 通用图标 | Menu, Apps, Settings, Home | | edit | 编辑类图标 | Edit, Copy, Delete, Save | | direction | 方向类图标 | ArrowUp, ArrowDown, ChevronLeft | | interaction | 交互类图标 | Click, Drag, Zoom, Refresh | | hint | 提示类图标 | Check, Close, Info, Warning | | currency | 货币类图标 | CNY, USD, EUR, GBP | | mid | 中台类图标 | 业务中台相关图标 | | hr | 人事类图标 | 人力资源相关图标 | | media | 影音类图标 | Play, Pause, Volume, Mute | | solid | 面性图标 | 填充样式图标 | | upload | 上传类图标 | Upload, Download, Cloud |

📖 API

Icon 组件

继承 Ant Design Icon 组件的所有属性。

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | component | 设置图标的 SVG 组件 | React.ComponentType<React.SVGProps<SVGSVGElement>> | - | | style | 设置图标的样式 | React.CSSProperties | - | | className | 设置图标的样式类名 | string | - | | spin | 是否有旋转动画 | boolean | false | | rotate | 图标旋转角度 | number | - | | twoToneColor | 仅适用双色图标，设置主要颜色 | string | - |

createIcon 工具函数

用于创建自定义图标组件。

type CreateIconOptions = {
  name: string;                    // 图标名称
  svg: React.ComponentType;        // SVG 组件
  meta?: {                         // 可选元数据
    category?: string;
    addedAt?: string;
    updatedAt?: string;
  };
};

function createIcon(options: CreateIconOptions): React.FC<IconProps>;

🌲 Tree-shaking

本库支持 Tree-shaking，使用具名导入以获得最佳打包效果：

// ✅ 推荐 - 支持 Tree-shaking
import { Menu, Apps } from '@yqg/slimfit-icons';

// ❌ 不推荐 - 会导入所有图标
import * as Icons from '@yqg/slimfit-icons';

🔗 相关链接

• SlimFit 组件库
• Ant Design Icons