# @brightlocal/illustrations 中文文档

规范地址：https://npmcn.com/package/%40brightlocal/illustrations/

版本：0\.7\.0
npm 元数据更新时间：2026-10-16T08:49:54.253Z
中文译文更新时间：2026-11-08T15:39:47.564Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40brightlocal/illustrations
原文对照：https://npmcn.com/package/%40brightlocal/illustrations/?lang=original
项目主页：https://github.com/BrightLocal/design-system#readme
源码仓库：https://github.com/BrightLocal/design-system

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

- 包体积（解压后）：17.5 MB，1480 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2025-11-17T09:25:06.936Z
- 最新版本发布：2026-10-16T08:49:54.052Z
- 近 30 天下载量：2159（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 8 个）

## 中文简介

亮度本地设计系统图示

## 安装

```sh
npm install @brightlocal/illustrations
```

也可以使用：`pnpm add @brightlocal/illustrations`、`yarn add @brightlocal/illustrations`、`bun add @brightlocal/illustrations`

## README

# @ brightlocal/ lilustrations (英语)

亮相本地设计系统图示——自定义SVG插图集,人物场景和静态图像.

## 安装

```bash
pnpm add @brightlocal/illustrations
```

## 类别

| 类别 | 说明 | 导入路径 |
| --- | --- | --- |
| 说明 | SVG 有地表型变体的插图 | `@brightlocal/illustrations/illustrations/*` |
| 环球 | 字符情感/方向变体 | `@brightlocal/illustrations/globey/*` |
| 环球场景 | 复合字符场景( SVG 文件通过 `<img>`(中文(简体) ) | `@brightlocal/illustrations/globey-scenes/*` |
| 视觉 | Raster 图像组件( JPG/ PNG) | `@brightlocal/illustrations/visuals/*` |

## 使用量

```tsx
import { SmallBusiness } from "@brightlocal/illustrations";

function App() {
  return (
    <div>
      {/* Default size: md (130x130) */}
      <SmallBusiness />

      {/* Size scale step, or a custom size */}
      <SmallBusiness size="lg" />
      <SmallBusiness size={400} />

      {/* Responsive with Tailwind */}
      <SmallBusiness className="w-64 h-64" />
    </div>
  );
}
```

## 直接进口

您也可以直接从每个类别导入:

```tsx
import { SmallBusiness } from "@brightlocal/illustrations/illustrations/small-business";
import { GlobeyCalmClosed } from "@brightlocal/illustrations/globey/globey-calm-closed";
import { GlobeyFixingFault } from "@brightlocal/illustrations/globey-scenes/globey-fixing-fault";
import { MapBackgroundDark } from "@brightlocal/illustrations/visuals/map-background-dark";
```

## 道具

### 说明和环球(SVG)

-   `size` - 宽度和高度 说明: `"md"` (130个) `"lg"` (300) QQ px/ CSS 值,默认值 `"md"`。环球:px/CSS值,默认值250
-   `variant` - 地表型变体: `"dark"` | `"white"` (略去时自动为白色/暗色)
-   `className` - 补充型式的CSS课程

### 环球场景和视觉( U)`<img>`\- 基于)

-   `width` - 图像宽度(每个组件的默认值不同)
-   `height` - 图像高度(每个组件的默认不同)
-   `alt` - 替换文本(默认: `""`(中文(简体) )
-   标准 `<img>` HTML 属性

## 主题支持

所有 SVG 插图根据当前主题使用 Tailwind 自动切换光和暗模式 `dark:` 变种.

## 许可证

无效

## 常见问题

### @brightlocal/illustrations 是什么？

亮度本地设计系统图示

### 如何安装 @brightlocal/illustrations？

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

### @brightlocal/illustrations 支持 TypeScript 吗？

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

### @brightlocal/illustrations 支持 ESM 还是 CommonJS？

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

### @brightlocal/illustrations 可以商用吗？

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

### @brightlocal/illustrations 的下载量有多少？

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

### @brightlocal/illustrations 还在维护吗？

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