#安装

#包管理器

选择你常用的包管理器安装：

# npm
npm install @jujiuyey/sag-icons

# pnpm
pnpm add @jujiuyey/sag-icons

# yarn
yarn add @jujiuyey/sag-icons

#引入样式

sag-icons 的颜色状态由 CSS 驱动，需要在项目中引入样式文件：

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

或在全局入口文件（如 main.tsx / main.ts）的最顶部引入。

#注册 Web Component

@jujiuyey/sag-icons 的核心是 <sag-icon> 自定义元素，只需引入主入口一次即可自动注册：

import '@jujiuyey/sag-icons';

之后在 JSX / 模板里直接使用：

<sag-icon name="workbench" />

不需要按图标单独 import（没有 WorkbenchIcon 这样的导出）。

#验证安装

渲染一个图标，确认一切正常：

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

export default function App() {
  return <sag-icon name="workbench" />;
}

应当看到一个灰色的 Workbench 图标。

#环境要求

• 现代浏览器（支持 Web Components 与 CSS 变量）
• React 18+ / Vue 3+ / 任意支持自定义元素的框架
• TypeScript 4.5+（可选，但推荐获得 <sag-icon> JSX 类型补全）