@shulex/icons

Shulex 图标组件库，基于 React 的 SVG 图标组件。

安装

npm install @shulex/icons
# or
pnpm add @shulex/icons

使用

import { SearchOutlined } from '@shulex/icons';

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

预览图标

pnpm dev

启动 Playground 开发服务器，在浏览器中预览所有图标。支持实时搜索、调整大小颜色、点击复制 import 语句。

发布新图标（Figma 插件）

图标的添加和发布完全通过 Figma 插件完成，无需手动操作仓库。

前置准备

1. 在 Figma 中安装 Shulex Icons 插件
2. 打开插件 → 设置页，填入 GitHub Personal Access Token
   • 需要权限：contents:write、actions:read
   • 在 GitHub Settings → Tokens 创建 Fine-grained token

发布流程

1. 在 Figma 画布上创建图标组件 组件命名规则：{图标名}{样式}，样式必须为 Outlined、Filled 或 Colored 之一 例如：ArrowRightOutlined、StarFilled、LogoColored

2. 打开插件 → 发布页 插件会自动扫描画布上所有符合命名规则的图标组件

3. 勾选要发布的图标，点击「发布选中图标」 插件会依次完成：

   • 导出 SVG
   • 校验命名、尺寸（必须 24×24）、拼写、重复检测
   • 将所有 SVG 以单次 commit 提交到仓库
   • 等待 CI 执行完成（按钮保持 loading 状态，点击进度文字可跳转到 CI 日志）

4. CI 完成后自动发布 GitHub Actions 会自动执行：生成 React 组件 → 构建 → 发布到 npm → 钉钉通知

图标命名规范

• 格式：PascalCase + 样式后缀，如 ArrowRightOutlined
• 仅含英文字母和数字，不含下划线、连字符、空格
• SVG 尺寸必须为 24×24
• 不能包含文字节点（需先轮廓化）

CI / 自动发布

每次向 master 分支的 static/ 目录推送变更时自动触发，执行步骤：

1. pnpm generate — 将 SVG 转换为 React 组件
2. pnpm build — 构建产物
3. 自动 bump patch 版本号并提交
4. npm publish — 发布到 npm（latest tag）
5. 钉钉通知，附新增图标预览

脚本说明

| 命令 | 说明 | |------|------| | pnpm dev | 启动 Playground 预览所有图标 | | pnpm generate | 从 static/ 生成图标组件到 src/icons/ | | pnpm build | 构建生产版本 |