#介绍

sag-icons 是一个专为"多色 + 状态感知"UI 场景设计的 SVG 图标库——侧边栏导航、Tab 栏、激活态指示器。

#特性

• 多色块 — 每个图标通过 data-tone 属性控制多个彩色区域
• CSS 驱动的状态切换 — 默认灰色，激活时变为彩色
• 响应式尺寸 — 内置侧边栏折叠支持
• TypeScript — 包含完整的类型定义
• 零 JavaScript 运行时 — 纯 SVG，无库开销

#为什么选择 sag-icons？

通用图标库（Lucide、IconPark、Tabler）面向"任意场景"。我们面向"多色 + 状态"——做有意的差异化，恰好是通用库不擅长的：

#状态感知的多色调

<sag-icon> 的多色由 is-active 类驱动激活态。IconPark 的多色是静态的，需要你额外写状态管理：

<!-- sag-icons: 加一个类就完事 -->
<sag-icon name="workbench" class="is-active"></sag-icon>

#CSS 变量驱动

:root {
  --sag-icon-blue: #3b82f6;
  --sag-icon-default: #9ca3af;
}

6 个变量就能换肤，不需要 props 层层传色。

#一个 Web Component 跨所有框架

不需要 react-lucide / vue-lucide / svelte-lucide 多包维护。一个 <sag-icon> 标签，React、Vue、Svelte、原生 HTML 都能用。

#包体积小且结构简单

78 个图标整包 33KB（gzip 6.75KB）。需要按需 import 也能：

import { workbench } from "@jujiuyey/sag-icons/data/icons/nav/workbench";

#我们的取舍

如果你的场景是"侧边栏导航 / Tab 栏 / 激活态指示器"，sag-icons 是为此而生的。

#下一步

• 安装 — 把 sag-icons 引入到你的项目
• 用法 — 基础渲染与进阶用法
• 颜色状态 — 状态切换与颜色定制