Silinex Icons React

由 lucide/ 和 radix/ SVG 资产生成的 React 图标组件库。组件库只支持 Tree Shaking 友好的静态组件引用方式，不提供运行时 <SlIcon name="..."> 入口。

目录结构

• lucide/、radix/: 原始 SVG 资产。
• icons.manifest.json: 前端、设计、AI 共用的单一真相源。
• icons.duplicates.json: 生成时跳过的重复图标记录；同名基础图标优先保留 lucide。
• dist/icons/*Icon.js: 每个图标一个独立 React 组件文件。
• dist/tools.js: 面向 LLM / MCP 的规则检索工具草案。
• mcp/server.mjs: stdio MCP server，供其他 agent 调用图标检索与解析工具。
• examples/icon-gallery.html: 静态图标工作台，供视觉兜底检索并点击复制组件代码。
• scripts/generate-icons.mjs: 重新生成 manifest、组件和工具声明。

使用方式

import LucideBellIcon from '@silinex/icons-react/LucideBellIcon';

<LucideBellIcon className="h-4 w-4 text-[#334155]" />;

不要使用运行时统一入口。静态 import 能让 bundler 只打包实际使用的图标，也能让 AI 从 manifest 直接输出可审查的 import 代码。

静态图标工作台

启动任意静态服务器后打开：

http://127.0.0.1:8012/examples/icon-gallery.html

页面会展示 manifest 标准图标和被映射到 lucide 优先版本的重复 SVG。点击图标卡片会复制：

import LucideBellIcon from '@silinex/icons-react/LucideBellIcon';

<LucideBellIcon className="h-4 w-4" />;

命名规则

manifest 中的 name 带来源前缀：

• lucide/bell.svg -> lucideBell -> LucideBellIcon
• radix/open-in-new-window.svg -> radixOpenInNewWindow -> RadixOpenInNewWindowIcon

如果 radix 和 lucide 存在相同基础 SVG 名称，manifest 默认只保留 lucide 版本。

LLM tools

import { search_icons, get_icon_usage, resolve_icon_to_code, resolve_design_icon } from '@silinex/icons-react/tools';

• search_icons({ query, topK, category, style }): 语义搜索图标，默认返回少量候选。
• get_icon_usage({ name }): 查询推荐和避免场景。
• resolve_icon_to_code({ name }): 输出静态 import 和 JSX 用法。
• resolve_design_icon({ name }): 输出设计侧名称和引用路径。

检索策略第一阶段为规则检索：name 精确命中最高权重，aliases、tags、preferredFor、description 依次降权，命中 avoidFor 会降权。后续可以把 name / aliases / tags / description / preferredFor / avoidFor / category 做 embedding，但不应向量化完整 SVG。

MCP server

本包提供一个轻量 stdio MCP server，复用 dist/tools.js，不会把完整 SVG 暴露给 agent。

npm run mcp

其他 agent / MCP client 可以配置：

{
  "mcpServers": {
    "silinex-icons": {
      "command": "node",
      "args": ["/Users/yourname/workspace/silinex-icons/mcp/server.mjs"]
    }
  }
}

暴露 tools：

• search_icons: 根据自然语言搜索标准 icon name。
• get_icon_usage: 查询推荐使用场景、避免场景和相关图标。
• resolve_icon_to_code: 返回静态 import 与 JSX 用法。
• resolve_design_icon: 返回设计侧 designName 与 designRef。

当前生成结果

• manifest 图标数：1957
• 跳过重复图标数：85

重新生成

npm run generate
npm run check