# @epilot360/illustrations 中文文档

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

版本：1\.2\.1
npm 元数据更新时间：2026-10-29T13:36:35.223Z
中文译文更新时间：2026-11-13T19:46:23.971Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：1.1 MB，62 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=16\.8\.0，react-dom \>=16\.8\.0
- 首次发布：2025-11-11T14:06:56.595Z
- 最新版本发布：2026-07-23T09:39:03.207Z
- 近 30 天下载量：5862（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 8 个）

## 中文简介

用于 epilot 平台的可树摇摆插图库

## 安装

```sh
npm install @epilot360/illustrations
```

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

## README

# @ epilot360/ 喷发

Epilot平台可树可摇动插图库. 由React所建,TypeScript,并优化为最小捆绑大小.

## 特征

-   🎨 **高质量 SVG 插图** 在图像中创建
-   📦 **可动摇的树** - 只导入你需要的
-   ⚡ **业绩优化** - 最小捆绑尺寸
-   🎯 **类型脚本支持** - 全套安全
-   ♿ **可访问** - 建筑无障碍
-   📱 **响应** - 在所有屏幕尺寸上工作
-   🎛️ **可自定义** - 灵活的尺寸和样式选择

## 安装

```bash
npm install @epilot360/illustrations
# or
yarn add @epilot360/illustrations
# or
pnpm add @epilot360/illustrations
```

## 使用量

### 基本用途

```tsx
import { CouponDiscount } from '@epilot360/illustrations';

function App() {
  return (
    <div>
      <CouponDiscount />
    </div>
  );
}
```

### 带有自定义大小

```tsx
import { CouponDiscount } from '@epilot360/illustrations';

function App() {
  return (
    <div>
      {/* Using predefined sizes */}
      <CouponDiscount size="large" />
      
      {/* Using custom dimensions */}
      <CouponDiscount width={200} height={200} />
    </div>
  );
}
```

### 无障碍

```tsx
import { CouponDiscount } from '@epilot360/illustrations';

function App() {
  return (
    <div>
      {/* Decorative (hidden from screen readers) */}
      <CouponDiscount />
      
      {/* With accessibility label */}
      <CouponDiscount 
        aria-label="20% discount coupon"
      />
    </div>
  );
}
```

### 带有自定义样式

```tsx
import { CouponDiscount } from '@epilot360/illustrations';

function App() {
  return (
    <div>
      <CouponDiscount 
        className="my-custom-class"
        style={{ 
          border: '2px solid #e2e8f0',
          borderRadius: '8px'
        }}
      />
    </div>
  );
}
```

## 可用说明

### 契约贴现

一个充满活力的优惠券折扣插图 完美地用于宣传内容和营销材料.

**道具 :**

-   `size?: 'small' | 'medium' | 'large'` - 预定义的大小变体
-   `width?: string | number` - 自定义宽度
-   `height?: string | number` - 自定义高度
-   `className?: string` - 额外CSS类
-   `style?: React.CSSProperties` - 内含样式
-   `aria-label?: string` - 无障碍标签。 如果提供插图,屏幕阅读器就可以访问. 如果不提供,插图会是装饰性的(隐藏在屏幕阅读器中).

## 发展

### 先决条件

-   节点.js 18+
-   npm,纱线,或pnpm

### 设置

```bash
# Install dependencies
npm install

# Start development server for documentation
npm run dev

# Build the library
npm run build:lib

# Build documentation site
npm run build:docs
```

### 脚本

#### 文档库( L)

-   `npm run dev` - 启动文档开发服务器
-   `npm run build:lib` - 建造图书馆以供分发
-   `npm run build:docs` - 建立文件网站

#### SystemJS 单发卡套装

-   `npm run dev:bundle` - 与Vite建立并服务SystemJS捆绑(http://localhost:3456)
-   `npm run build:bundle` - 为微前端构建系统JS捆绑
-   `npm run serve:bundle:vite` - 使用 Vite 预览服务器完成已建捆绑

#### 代码质量

-   `npm run type-check` - 运行类型脚本类型检查
-   `npm run lint` - 运行ESLint
-   `npm run lint:fix` - 解决ESLint问题

### 用于 Single- SPA 微前端

此库可用作单斯帕应用程序中的SystemJS捆绑:

```bash
# Build and serve the bundle locally
npm run dev:bundle
```

捆绑将在 `http://localhost:3456/bundle.js` 并给予中央遥感中心全力支持.

**导入地图配置 :**

```json
{
  "imports": {
    "@epilot360/illustrations": "http://localhost:3456/bundle.js"
  }
}
```

捆绑使用:

-   **系统JS格式** 单相容性
-   **经典JSX转型** (无反应/jsx运行时间依赖)
-   **外部反应/反应DOM** (共同依赖关系)

## 套装大小

库最优化为最小捆绑大小 :

-   **可动摇的树**: 只导入需要的插图
-   **基于 SVG**: 任何大小的简单渲染的矢量图形
-   **已缩小**:生产建筑被精细化和优化
-   **无外部依赖关系**: 0 运行时间依赖性

## 浏览器支持

-   Chrome 88+ (英语)
-   Firefox 85+ (英语)
-   萨法里14+
-   边缘88+

## 捐款

1.  叉子存储器
2.  创建特性分支 : `git checkout -b feature/new-illustration`
3.  按照已有的图案添加您的插图
4.  更新文档
5.  运行测试和林入: `npm run lint && npm run type-check`
6.  提交更改 : `git commit -m 'Add new illustration'`
7.  推到树枝上: `git push origin feature/new-illustration`
8.  创建拉动请求

## 许可证

麻省理工学院

## 常见问题

### @epilot360/illustrations 是什么？

用于 epilot 平台的可树摇摆插图库

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

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

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

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

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

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

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

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

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

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

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

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