kubai087/kubai-icons

项目介绍

Kubai Icons 由两部分共用一套绘制体系。第一部分是 Agent 技能：Claude Code、Codex 等编程 Agent 读取 PROMPT.md 中的规则，调用仓库自带的引擎，按现有图标的风格绘制新的动态图标。第二部分是图标库：2,800+ 个图标（近 900 个对象，另有带角标和斜杠的 "off" 版本），分别提供 React、Vue、纯 JavaScript、Web Component 和静态 SVG 版本，并配有可搜索、改色、复制代码并获取图标的网站。

动画表现为物体本身的动作：文件夹打开、信封拆封、日历翻页。每个图标由背层、可选的白色内容和前层组成，渐变、描边和阴影全部从一个强调色推导，因此图标跟随 currentColor，改色不需要脚本；每个部件只有静止和悬停两个关键帧。绘制规则见 PROMPT.md，配色与插值引擎见 engine.js。

适合需要统一动态图标风格的前端团队，也适合希望让 Agent 为自己的产品扩展图标的开发者。

快速使用

在 React 中使用图标包

需要 React 18+。安装后按名称引入：

npm i kubai-icons-react

import { Folder, CalendarCheck } from "kubai-icons-react";

<Folder />
<CalendarCheck size={32} color="#22C55E" variant="soft" badgeColor="semantic" />

<button data-kubai-trigger>
  <Folder size={18} trigger="parent" /> Open
</button>

默认跟随 currentColor；trigger="parent" 表示父元素被悬停时播放动画。各框架的安装与用法见 React、Vue、核心包与 Web Component、静态 SVG 的文档。也可以直接在网站 图标浏览器 中按名称、形状或含义搜索，改色，复制代码或下载 PNG/SVG，并把一组图标打包成 ZIP。

安装 Agent 技能

把 README 中的安装请求复制给 Agent：它会将仓库克隆到技能目录（Claude Code 为 ~/.claude/skills，Codex 为 ~/.agents/skills），并确认 SKILL.md 存在。也可以手动克隆：

git clone https://github.com/kubai087/kubai-icons.git ~/.claude/skills/kubai-icons

重启 Agent 后直接描述需要的图标。一次典型流程是：读取规则，为每个功能写一行描述（用什么物体、悬停时做什么动作），从结构最接近的现有图标出发绘制，并与现有图标并排运行无头自检，直到检查清单全部通过。建议使用能读取图片的模型；README 中记录的盲测使用 Claude Opus 5.5。注意技能不会自动复制进项目：为自己的产品新建图标集时，需要把引擎、画廊和自检脚本复制到项目中。

运行自检

自检需要 Node.js 18+ 和 Chrome，全程无头运行：

node scripts/check.mjs --only 剪刀,地图 --with 文件夹,邮件,下载

截图默认写入 check-out/，可用 --out 指定目录。技能自带的示例图标使用中文名称和配色，通过 --palette 或 --accent 选择颜色；静态导出同样使用中文命名，例如 node scripts/export.mjs --only 文件夹,日历 --palette 薄荷 --out icons/。

使用约束

• 各部分许可证不同。 图标和四个包使用 MIT，可用于商业项目。技能采用 Kubai Icons License：用技能生成的图标归你所有，但不得转售技能、分发修改后的规则文件或改换品牌。网站、工具、测试和文档为 All rights reserved，Kubai 和 Lumno 名称与标识不可复用。LICENSING.md 列出了每个文件对应的许可证。
• Node 与浏览器要求。 自检和导出需要 Node.js 18+ 与 Chrome；开发图标库和网站需要 Node.js 20+。CHROME 可覆盖浏览器路径。生成 README 中的演示素材还需要 ffmpeg 和 img2webp。
• Agent 支持。 技能面向 Claude Code 和 Codex 设计；不支持技能的 Agent 可以直接读取 SKILL.md，但绘制效果取决于模型能否遵循规则并查看渲染出的图片。
• 动画模型。 每个图标只有静止和悬停两个关键帧。若需要更复杂的运动，需要修改引擎和规则，而不是给单个图标添加关键帧。

HotRepo 点评

该仓库暂无 GitHub 全语言日榜记录。可追踪的数据只有 2026-11-09 的 JavaScript 新项目榜快照：在 2026-11-08T02:45Z 至 2026-11-09T02:45Z 约 24 小时的窗口内新增 68 个 Star。采样 Star 曲线从 2026-11-04 的 104 升至 2026-11-09 的 326，最后一个采样小时从 282 跳到 326；这只是单个采样区间，只能说明末期有一次跳升，不能据此判断持续趋势。项目创建于 2026-11-03，尚无法评估长期采用情况。技术上值得关注的是「源码可见的绘制技能 + MIT 图标库 + 浏览器前端」的组合：团队可以让自己使用的 Agent 扩展图标集，而不必逐个手绘。