#颜色状态

sag-icons 的核心差异化：多色调 + 状态感知。其他图标库的多色是静态的，sag-icons 的多色由 is-active 类驱动。

sag-icons 提供两种内置颜色状态：默认（灰色）与激活（彩色）。状态的切换完全由 CSS 类驱动，无需 JavaScript 介入。

#状态对照

#激活示例

import '@jujiuyey/sag-icons';
import '@jujiuyey/sag-icons/css/svg-icon.css';

<sag-icon name="workbench" className="is-active" />

#色块（data-tone）

每个图标的多个色块通过 data-tone 属性区分，可被 CSS 选择器单独控制：

sag-icon.is-active [data-tone="blue"] {
  color: #3b82f6;
}

sag-icon.is-active [data-tone="cyan"] {
  color: #06b6d4;
}

#颜色自定义

通过覆盖 CSS 变量调整任意色块：

:root {
  --sag-icon-blue: #3b82f6;
  --sag-icon-cyan: #06b6d4;
  --sag-icon-green: #22c55e;
  --sag-icon-amber: #f59e0b;
  --sag-icon-white: #ffffff;
  --sag-icon-default: #9ca3af;
}

#暗色主题

在暗色主题下，建议调亮默认灰色以保证对比度：

.dark {
  --sag-icon-default: #6b7280;
}

#与任意状态联动

由于激活态由 is-active 类控制，你可以把它与任意状态系统对接：

• 路由匹配（如 @tanstack/react-router 的 activeProps）
• 手动状态（如 React 的 useState）
• 父组件传参
• :hover / :focus 伪类

只要给 sag-icon 元素加上 is-active 类，CSS 就会自动应用完整配色。