# @cockroachlabs/icons 中文文档

规范地址：https://npmcn.com/package/%40cockroachlabs/icons/

版本：0\.9\.12
npm 元数据更新时间：2026-11-03T12:21:54.563Z
中文译文更新时间：2026-11-10T05:09:58.372Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40cockroachlabs/icons
原文对照：https://npmcn.com/package/%40cockroachlabs/icons/?lang=original

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

- 包体积（解压后）：653 kB，4 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2020-02-19T23:41:42.406Z
- 最新版本发布：2026-07-27T19:10:16.412Z
- 近 30 天下载量：15638（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：983（近 12 个月 7 个）

## 中文简介

Cockroach UI 导出为 React 组件的图标

## 安装

```sh
npm install @cockroachlabs/icons
```

也可以使用：`pnpm add @cockroachlabs/icons`、`yarn add @cockroachlabs/icons`、`bun add @cockroachlabs/icons`

## README

# @cockroachlabs/相册

> 包含 Cockroach 实验室图标作为 SVG 供其他组件消费的软件包

这个软件包作为SVG图标的存储器,这些图标被转换并作为React组件发布.

## 使用量

_虽然此软件包收藏中的任何图标都可以单独导入, **在实践中**,用于Cockroach Labs应用中 [ui组件](https://npmcn.com/package/%40cockroachlabs/ui-components/src/Icon/index.ts) ,为预定的图标用途(大小和填充)提供类型。 见 [下级](https://npmcn.com/package/%40cockroachlabs/icons/#readme-icon-sets-and-components) 用于实例._

```jsx
import { Time } from "@cockroachlabs/icons";

const TimeButton = ({ timestamp }) => (
  <button>
    <Time /> {timestamp}
  </button>
);
```

```jsx
import * as Icons from "@cockroachlabs/icons";

// ...

<EditMessage icon={Icons.Pencil} />;
```

每个图标组件将构成一个 `<svg />` 未绑定大小且可能没有默认填充颜色的元素。 这些属性可以作为 `props`。 。 。 .

```jsx

  import { CheckCircleFilled } from "@cockroachlabs/icons";

  <CheckCircleFilled fill="green" height="24px" width="24px" />

  // or

  <CheckCircleFilled style={{ fill: "green", height: "24px", width: "24px" }} />
```

### 图标集和组件

具有共同属性的图标被组合到一个导出收藏中,并一般具有关联性 [组件](https://npmcn.com/package/%40cockroachlabs/ui-components/src/Icon/index.ts) 从集中生成图标。 出口的套装是,

-   **系统图标** - 用作共同行动和命令的可视化表现,以提供更多的背景和提高可用性。 这些图标必要时可以扩大或缩小规模. 它们只应作一色.
-   **图像** - 象形图图标包含1个以上的颜色值,其大小大于系统图标. 它们被用来在有空间的UI中增加个性,视觉兴趣和品牌.
-   **第三方图标** - 曾经代表 3 党徽在UI。 这些图标必要时可以扩大或缩小规模,并继承了第3个党的品牌颜色.
-   **信用卡** ——信用卡图标用于代表信用卡品牌. 它们可以升降,并且可以由我们的设计系统调色板以外的颜色组成.
-   **旗帜** - 旗帜图标用来代表一个区域或国家。 它们可以升降,并且可以由我们的设计系统调色板以外的颜色组成.
-   **说明** - 说明是大规模使用的,一般在空州或404页等空间很多的地区使用。 它们在UI中增加了个性,视觉兴趣和品牌.

这些组合可以使用其相关组件来渲染,

```tsx
import { Icon, Pictogram, ThirdPartyIcon, CreditCard, Flag, Illustration } from "@cockroachlabs/ui-components";

/*
   ...snip
*/

<Icon iconName="Gear" size="small" fill="info" />

<Pictogram pictogramName="Email" size="medium" />

<ThirdParty iconName="Gcp" size="large" />

{/* Flag icons can be referenced by "flagName" or "countryCode" prop  */}
<Flag flagName="Canada" size="medium" />
<Flag countryCode="can" size="small" />

<CreditCard creditCardName="Visa" size="tiny" />

<Illustration illustrationName="SleepMoon" />
```

### SVG道具通过

使图标都延伸的组件 `SVGElement` 道具和任何组件都可以 [常见的 HTML 元素属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)。例如,

```tsx
  <Icon iconName="Pencil" size="small" className="edit-icon" aria-label="Edit field icon" id="edit-icon">
```

### 我如何贡献出新的图标?

见 [捐款额](https://npmcn.com/package/%40cockroachlabs/icons/CONTRIBUTING.md) 用于说明添加新图标和发布新版本图标包.

## 常见问题

### @cockroachlabs/icons 是什么？

Cockroach UI 导出为 React 组件的图标

### 如何安装 @cockroachlabs/icons？

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

### @cockroachlabs/icons 支持 TypeScript 吗？

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

### @cockroachlabs/icons 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @cockroachlabs/icons 可以商用吗？

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

### @cockroachlabs/icons 的下载量有多少？

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

### @cockroachlabs/icons 还在维护吗？

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