lingee-icon

基于 React 的 SVG 图标组件库，共 968 个图标，27 个分类。

安装

pnpm add lingee-icon

使用（React 组件）

import { Search, Check } from "lingee-icon";

function App() {
  return (
    <div>
      <Search size={24} color="#333" />
      <Check size="1em" />
    </div>
  );
}

使用（纯 HTML / SVG Sprite）

lingee-icon 提供完整的 SVG Sprite 文件，可在纯 HTML 场景中直接使用：

<!-- 1. 在页面中引入 Sprite（任选一种方式） -->

<!-- 方式 A：通过 CDN -->
<script src="https://cdn.jsdelivr.net/npm/lingee-icon@latest/dist/svg-sprite.js"></script>

<!-- 方式 B：本地引入构建产物 -->
<script src="node_modules/lingee-icon/dist/svg-sprite.js"></script>

<!-- 2. 通过 <use> 引用图标（图标名为 PascalCase） -->
<svg width="20" height="20" fill="currentColor">
  <use href="#Search"></use>
</svg>

<svg width="24" height="24" fill="#333">
  <use href="#Check"></use>
</svg>

常用尺寸：16 / 18 / 20 / 24px。图标名即为 <use href="#图标名"> 中的 ID。

选图流程

1. 查阅 ICONS.md 获取完整分类索引（CDN: https://cdn.jsdelivr.net/npm/lingee-icon@latest/ICONS.md）
2. 按语义从分类索引中选择图标名（PascalCase）
3. 使用 <use href="#图标名"> 引用

Props（React 组件）

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | size | number | string | "1em" | 图标宽高 | | color | string | "currentColor" | 填充颜色 | | fill | string | undefined | 直接作为 SVG fill，支持渐变引用 | | rotate | number | 0 | 顺时针旋转度数 | | spin | boolean | false | 持续自转动画 | | className / style / onClick / ...rest | - | - | 标准 SVG 属性透传 |

图标索引

完整图标分类索引见 ICONS.md。

禁止的图标来源

| 来源 | 禁止原因 | |------|----------| | @ant-design/icons | 风格不统一，包体积大 | | lucide-react | 风格不统一 | | webui/src/app/assets/icons/*.svg | 散落 SVG 无法统一管理 |

图标不存在时按下方「新增图标」流程添加，不要从其他来源引入。

新增图标

详细流程见 AGENTS.md。

渐变色图标

• 方式 A（默认）：外层 CSS 渐变背景 + 单色图标（color="#fff"）
• 方式 B：SVG 内部路径渐变，需挂载 GradientDefs Provider + fill="url(#id)"

原则：默认走方式 A，仅设计稿强制要求 SVG 路径渐变时走方式 B。

参考实现：packages/webui/src/app/pages/skill-center/components/SkillIconDefs.tsx

构建

pnpm --filter lingee-icon build       # 完整构建
pnpm --filter lingee-icon preview     # 重新生成 icon-preview.html