# @box/blueprint-web-assets 中文文档

规范地址：https://npmcn.com/package/%40box/blueprint-web-assets/

版本：5\.15\.0
npm 元数据更新时间：2026-11-06T03:57:28.494Z
中文译文更新时间：2026-11-08T12:44:40.627Z
软件包许可：SEE LICENSE IN LICENSE

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

原始 npm 页面：https://www.npmjs.com/package/%40box/blueprint-web-assets
原文对照：https://npmcn.com/package/%40box/blueprint-web-assets/?lang=original

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

- 包体积（解压后）：3.6 MB，2280 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^17\.0\.0 \|\| ^18\.0\.0，react-dom ^17\.0\.0 \|\| ^18\.0\.0
- 首次发布：2024-02-05T16:36:11.973Z
- 最新版本发布：2026-11-06T03:57:28.290Z
- 近 30 天下载量：71709（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：670（近 12 个月 407 个）

## 中文简介

暂无中文简介

## 安装

```sh
npm install @box/blueprint-web-assets
```

也可以使用：`pnpm add @box/blueprint-web-assets`、`yarn add @box/blueprint-web-assets`、`bun add @box/blueprint-web-assets`

## README

-   [网络资产 `@box/blueprint-web-assets`](https://npmcn.com/package/%40box/blueprint-web-assets/#readme-blueprint-web-assets-boxblueprint-web-assets)
-   [安装](https://npmcn.com/package/%40box/blueprint-web-assets/#readme-installation)
-   [使用量](https://npmcn.com/package/%40box/blueprint-web-assets/#readme-usage)
    -   [键](https://npmcn.com/package/%40box/blueprint-web-assets/#readme-tokens)
    -   [资产](https://npmcn.com/package/%40box/blueprint-web-assets/#readme-assets)
-   [如何更新资产和债券](https://npmcn.com/package/%40box/blueprint-web-assets/#readme-how-to-update-assets-and-tokens)
-   [项目脚本](https://npmcn.com/package/%40box/blueprint-web-assets/#readme-project-scripts)

# 网络资产 `@box/blueprint-web-assets`

`@box/blueprint-web-assets` 是Box 资产(相册、插图)和符号(颜色、字体、间隔等)的综合集合。 你可以检查我们现有的资产 [门户](https://go/dsys)。 。 。 .

# 安装

```
yarn add @box/blueprint-web-assets
```

# 使用量

## 键

单位 `scss` 文件 :

如果可能,请使用 Css 变量:

```
@use '@box/blueprint-web-assets/tokens/tokens-css-vars.scss';
...

.component {
    background-color: var(--background-background);
}
```

否则,你可以使用scss符号,但记住,这种方法是 **已贬值**数字 :

```
@use '@box/blueprint-web-assets/tokens/tokens.scss'; // or @import if you're not using dart sass

...

.component {
    background-color: tokens.$background-background;
}
```

单位 `tsx` 文件 :

```
import { BackgroundBackground } from '@box/blueprint-web-assets/tokens/tokens';

...

<Checkmark color={BackgroundBackground} />
```

目前,我们还分发“ @box/blueprint-web-assets/tokens/px-tokens” - js文件,其中包含像素值中的符号。 只有当您的使用案例不支持 rem 单位时,例如,你才应该使用它. [电子邮件客户端](https://www.caniemail.com/features/css-unit-rem/)。 。 。 .

## 资产

可以使用所有图标作为正则反应组件.

```
import { InfoBadge } from '@box/blueprint-web-assets/icons/Line';

...

<InfoBadge />
```

要改变图标颜色, 您可以使用 `color` 道具 :

```
import { Alert } from '@box/blueprint-web-assets/icons/Fill';
import { IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
...

<Alert color={IconIconErrorOnLight} />
```

图标路径定义图标样式 :

```
import { InfoBadge } from '@box/blueprint-web-assets/icons/Line';
import { Alert } from '@box/blueprint-web-assets/icons/Fill';
import { FileAudio } from '@box/blueprint-web-assets/icons/Content';
import { BoxLogo } from '@box/blueprint-web-assets/icons/Logo';
import { Compass } from '@box/blueprint-web-assets/icons/Multitone';
```

# 如何更新资产和债券

```
yarn exec nx run blueprint-web-assets:build-assets
```

将更改推向新分支 。 合并后将发布新版本的软件包.

# 项目脚本

-   `nx test blueprint-web-assets` 通过 [欢乐](https://jestjs.io/)
-   `nx lint blueprint-web-assets` 要通过 [ESLint 语录](https://eslint.org/)

## 常见问题

### 如何安装 @box/blueprint-web-assets？

在项目目录运行 npm install @box/blueprint-web-assets，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^17\.0\.0 \|\| ^18\.0\.0）、react-dom（^17\.0\.0 \|\| ^18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @box/blueprint-web-assets 支持 TypeScript 吗？

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

### @box/blueprint-web-assets 支持 ESM 还是 CommonJS？

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

### @box/blueprint-web-assets 可以商用吗？

@box/blueprint-web-assets 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @box/blueprint-web-assets 的下载量有多少？

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

### @box/blueprint-web-assets 还在维护吗？

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