# @adobe/spectrum-wc-icons 中文文档

规范地址：https://npmcn.com/package/%40adobe/spectrum-wc-icons/

版本：2\.0\.0-beta\.7
npm 元数据更新时间：2026-11-09T21:59:40.295Z
中文译文更新时间：2026-11-09T22:01:26.669Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40adobe/spectrum-wc-icons
原文对照：https://npmcn.com/package/%40adobe/spectrum-wc-icons/?lang=original
项目主页：https://spectrum-web-components.adobe.com/
源码仓库：https://github.com/adobe/spectrum-web-components

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：5.2 MB，2539 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2026-09-01T16:53:11.292Z
- 最新版本发布：2026-11-09T21:59:40.051Z
- 近 30 天下载量：2015（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 16 个）

## 中文简介

Spectrum 2 工作流程图标作为可树形自定义元素和 SVG 字符串功能

## 安装

```sh
npm install @adobe/spectrum-wc-icons
```

也可以使用：`pnpm add @adobe/spectrum-wc-icons`、`yarn add @adobe/spectrum-wc-icons`、`bun add @adobe/spectrum-wc-icons`

## README

# @ adobe/ spectrum-wc- icons (英语)

光谱 2 **工作流程图标** 页:1 [光谱网络组件](https://spectrum-web-components.adobe.com/)公开的、框架不可知的图标艺术提供了两种方式:

-   **Per- icon 自定义元素** (单位:千美元)`<swc-icon-star>`:在任何框架中以零仪式,携带大小,颜色,和可访问性来渲染的滴入标记.
-   **Per- icon SVG 字符串函数** (单位:千美元)`Icon_Star()`:可树摇动地基,可通过 `innerHTML`反应 `dangerouslySetInnerHTML`单 `v-html`,或 立特 `unsafeSVG`。 。 。 .

两人都不是Lit的消费者 软件包只取决于 `@adobe/spectrum-wc-core` (用于: `IconBase`) (中文(简体) ).

> 该艺术出自Adobe-内部A4U **S2 图标全局集( 打开源码)** 使用此软件包的工作流程生成器。 见 [重新生成](https://npmcn.com/package/%40adobe/spectrum-wc-icons/#readme-regenerating) 编辑 [图标策略 RFC](https://npmcn.com/CONTRIBUTOR-DOCS/03_project-planning/05_strategies/icon-rfc.md)。 。 。 .

## 安装

```bash
yarn add @adobe/spectrum-wc-icons
```

## 使用量

### 自定义元素( 任何框架, 无升)

由子路径导入 per- icon 元素; 导入将标记登记为副效果 .

```ts
import '@adobe/spectrum-wc-icons/swc-icon-star.js';
```

```html
<swc-icon-star accessible-label="Favorite"></swc-icon-star>
```

```jsx
<swc-icon-star accessible-label="Favorite" /> // React 19
```

一次注册每个图标( 不具有树摇动性; 偏好在apps中导入每平方英寸 ) :

```ts
import '@adobe/spectrum-wc-icons/elements.js';
```

### SVG 字符串函数( 构建时间、 SSR 、 自定义组成)

```ts
import { Icon_Star } from '@adobe/spectrum-wc-icons/Star.js';

element.innerHTML = Icon_Star();
```

包的默认导出是每个函数的管子,为方便:

```ts
import { Icon_Star, Icon_Folder } from '@adobe/spectrum-wc-icons';
```

## API 密码

每个元素延伸 `IconBase` 从 `@adobe/spectrum-wc-core`数字 :

| 成员 | 类型 | 默认 | 页:1 |
| --- | --- | --- | --- |
| `size` | `'xs' | 's' | 'm' | 'l' | 'xl'` | `'m'` | 大小框; 单幅绘图缩放. |
| `accessible-label` | `string` | `''` | 设定: 主机获得 `role="img"` + 键 `aria-label`空: 主机为 `aria-hidden` (修饰. |
| 支助科 `color` | `<color>` | 继承 | 驱动图标颜色通过 `currentColor` 倒计时. |
| 支助科 `--swc-icon-color` | `<color>` | `currentColor` | 高级色彩覆盖, 独立于文本 `color`。 。 。 . |

## 命名

对于一个 A4U 逻辑名称 `<Name>` (PascalCase,例如:. `Star`, (中文(简体) ), `AddCircle`, (中文(简体) ), `3DAsset`:

| 产出 | 表单 | 示例`AddCircle`(中文(简体) ) | 示例`3DAsset`(中文(简体) ) |
| --- | --- | --- | --- |
| 函数 | `Icon_<Name>()` | `Icon_AddCircle()` | `Icon_3DAsset()` |
| 元素类 | `Icon<Name>` | `IconAddCircle` | `Icon3DAsset` |
| 元素标记 | `swc-icon-<kebab>` | `swc-icon-add-circle` | `swc-icon-3d-asset` |
| 函数子路径 | `/<Name>.js` | `/AddCircle.js` | `/3DAsset.js` |

## 重新生成

图标艺术和风格生成,而非手写. 从 repo 根中运行这些或 `gen2/packages/icons`。 。 。 .

| 命令 | 它会做什么 |
| --- | --- |
| `yarn generate:workflow-icons` | 重现 `src/*.ts` 从原始 SVG 中 `icon-source/`运行 `generate:icon-styles` |
| `yarn generate:icon-styles` | 副本 `gen2/packages/swc/stylesheets/_lit-styles/icon-base.css` 改为 `src/stylesheets/icon-base.css` |
| `yarn check:icon-styles` | 如果样式表副本已过时( 运行于 `yarn build`(中文(简体) ) |

要刷新艺术( Adobe- 内部, VPN 需要), 将 S2 图标全球集( 打开源) SVG 下载到 `icon-source/`运行 `yarn generate:workflow-icons`。源 SVGs 被 git-ignored; 只有生成的艺术在 `src/` 承诺。 见 [图标源读取](https://npmcn.com/package/%40adobe/spectrum-wc-icons/icon-source/README.md) 整个步骤.

`src/stylesheets/icon-base.css` 是生成的副本:编辑 swc 源,然后运行 `yarn generate:icon-styles`。见 [图标样式表](https://npmcn.com/package/%40adobe/spectrum-wc-icons/icon-source/README.md#icon-stylesheet)。 。 。 .

## 常见问题

### @adobe/spectrum-wc-icons 是什么？

Spectrum 2 工作流程图标作为可树形自定义元素和 SVG 字符串功能

### 如何安装 @adobe/spectrum-wc-icons？

在项目目录运行 npm install @adobe/spectrum-wc-icons，或使用 pnpm add / yarn add / bun add。

### @adobe/spectrum-wc-icons 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @adobe/spectrum-wc-icons 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @adobe/spectrum-wc-icons 可以商用吗？

@adobe/spectrum-wc-icons 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @adobe/spectrum-wc-icons 的下载量有多少？

根据 npm 官方下载统计，@adobe/spectrum-wc-icons 在 2026/10/05 – 2026/11/03 这 30 天内被下载 2,015 次，日均约 67 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @adobe/spectrum-wc-icons 还在维护吗？

最新版本 2\.0\.0-beta\.7 发布于 2026/11/10（今天）；至今共发布 16 个版本，其中过去 12 个月发布了 16 个；首次发布于 2026/09/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。