#用法

sag-icons 只有一个核心元素 <sag-icon>。它是一个 Web Component，React / Vue / 原生 HTML 用法几乎一致——区别只在少数属性写法。

#React

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

export default function Sidebar() {
  return (
    <nav>
      <sag-icon name="workbench" />
      <sag-icon name="settings" className="is-active" />
    </nav>
  );
}

要点：

• React 用 className，序列化到 DOM 后是 class="is-active"，CSS 选择器照常生效
• <sag-icon> 在 JSX 中有 TypeScript 类型补全（name 必须是有效图标名）
• 无需引入任何 *Icon 组件——<sag-icon> 就是组件

#Vue 3

<script setup lang="ts">
import '@jujiuyey/sag-icons';
import '@sag-icons/css/svg-icon.css';
</script>

<template>
  <nav>
    <sag-icon name="workbench" />
    <sag-icon name="settings" :class="{ 'is-active': isActive }" />
  </nav>
</template>

要点：

• 模板里直接用 class（HTML 原生属性）
• 条件类用 Vue 的对象语法 :class="{ 'is-active': isActive }"
• 如果项目用 <script setup lang="ts"> 且开启了 TS 检查，name 也会被校验

#原生 HTML / 其他框架

<script type="module">
  import 'https://esm.sh/@jujiuyey/sag-icons';
  import 'https://esm.sh/@jujiuyey/sag-icons/css/svg-icon.css';
</script>

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

任意能输出 HTML 的环境都能用：Svelte、 Solid、Preact、Alpine.js、甚至服务端模板。

#通用：激活状态

切换 is-active 类即可在"默认灰"和"激活彩色"之间切换，三种环境写法一致：

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

#通用：尺寸控制

sag-icon 的默认尺寸是 1.25rem（20px）。通过 CSS 覆盖即可，三种环境都一样：

/* 全局 */
sag-icon { width: 1.5rem; height: 1.5rem; }

或在 JSX/模板里用 inline style（需 sag-icon 元素接受 style 属性）：

// React
<sag-icon name="workbench" style={{ width: '1.5rem', height: '1.5rem' }} />

<!-- Vue -->
<sag-icon name="workbench" :style="{ width: '1.5rem', height: '1.5rem' }" />

#通用：与路由库集成

激活态由你控制——把 is-active 接到路由的"激活"判断上。

#React Router v6

import { NavLink } from 'react-router-dom';

<NavLink to="/workbench" className={({ isActive }) => isActive ? 'is-active' : ''}>
  <sag-icon name="workbench" />
</NavLink>

#@tanstack/react-router

import { Link } from '@tanstack/react-router';

<Link to="/workbench" activeProps={{ className: 'is-active' }}>
  <sag-icon name="workbench" />
</Link>

#Vue Router 4

<template>
  <RouterLink
    to="/workbench"
    active-class="is-active"
    custom
    v-slot="{ navigate, isActive }"
  >
    <sag-icon
      name="workbench"
      :class="{ 'is-active': isActive }"
      @click="navigate"
    />
  </RouterLink>
</template>

#通用：父容器尺寸（响应式）

把尺寸控制交给父元素，sag-icon 自动填充。例如 shadcn/ui 的可折叠侧边栏：

<div className="group-data-[collapsible=icon]:!size-6">
  <sag-icon name="workbench" />
</div>

<div class="group-data-[collapsible=icon]:!size-6">
  <sag-icon name="workbench" />
</div>

#命名约定

图标名用 kebab-case（多词用 - 分隔）：

• name="customer-service" 对应 ICON_PATHS["customer-service"]
• name="workbench" 对应数据键 ICON_PATHS.workbench

完整的 78 个图标名见 图标预览。