# @cypress-design/icon-registry 中文文档

规范地址：https://npmcn.com/package/%40cypress-design/icon-registry/

版本：3\.4\.0
npm 元数据更新时间：2026-10-25T15:29:04.292Z
中文译文更新时间：2026-11-11T07:14:34.456Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40cypress-design/icon-registry
原文对照：https://npmcn.com/package/%40cypress-design/icon-registry/?lang=original

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

- 包体积（解压后）：2.7 MB，20 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2022-05-17T20:01:54.947Z
- 最新版本发布：2026-10-25T15:29:04.143Z
- 近 30 天下载量：27792（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：137（近 12 个月 15 个）

## 中文简介

所有要曝光到图标组件的 svg 文件

## 安装

```sh
npm install @cypress-design/icon-registry
```

也可以使用：`pnpm add @cypress-design/icon-registry`、`yarn add @cypress-design/icon-registry`、`bun add @cypress-design/icon-registry`

## README

# 图标登记册

此软件包包含SVG图标,并提供了作为HTML元素加载的方法. 这包含了所有没有具体反应或vue的元素.

## 使用量

```ts
import {
  /**
   * Array of icons generated by svg-to-ts
   * contains the body of each icon
   */
  iconSet,
  /**
   * Record of each icon with is meta data
   * key: camel case of the rootId (ex: "action-next")
   * value: {
   *  availableSizes: ['16'],
   *  hasFillColor: false,
   *  hasStrokeColor: true,
   *  hasSecondaryFillColor: false,
   *  hasSecondaryStrokeColor: false,
   * }
   */
  iconsMetadata,
  compileIcon,
  getComponentAttributes,
} from '@cypress-design/icon-registry'

iconSet.forEach((icon) => {
  // `icon.name` contains "book-code-x16"
  // since we mostly need the rooId we can extract it from the name
  const [rootId] = icon.name.split('_x')
  // these information sets are intended to be used in a template or a render function
  console.log({
    body: icon.data,
    metaData: icons[rootId],
  })

  const { size, compiledClasses, body } = compileIcon({
    name: rootId,
    size: 16,
    // colors from the tailwind set of colors
    strokeColor: 'red-600',
    fillColor: 'amber-300',
  })
  // size: the size of the icon with the default value if possible,
  // compiledClasses: all css classes that we will hav to add to our SVG element becaus eof the color passed,
  // body: the interior of the SVG element between the opening and closing SVG tags,
})
```

## 构建

### 生成类型

样本 :

```ts
// lists all the colors available from windi classes
export type WindiColors = 'jade-200' | 'jade-300' | 'red-200' | 'red-300'

export type IconProps =
  | IconActionDeleteCircleProps
  | IconTestingTypeComponentProps
// | ...

interface IconActionDeleteCircleProps {
  name: 'action-delete-circle'
  color?: keyof typeof colors
}

interface IconTestingTypeComponentProps {
  name: 'testing-type-component'
  size?: 16 | 24 | 64 | 120
  color?: keyof typeof colors
  bgColor?: keyof typeof colors
}

//...
```

## 常见问题

### @cypress-design/icon-registry 是什么？

所有要曝光到图标组件的 svg 文件

### 如何安装 @cypress-design/icon-registry？

在项目目录运行 npm install @cypress-design/icon-registry，或使用 pnpm add / yarn add / bun add。

### @cypress-design/icon-registry 支持 TypeScript 吗？

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

### @cypress-design/icon-registry 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @cypress-design/icon-registry 可以商用吗？

@cypress-design/icon-registry 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cypress-design/icon-registry 的下载量有多少？

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

### @cypress-design/icon-registry 还在维护吗？

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