@ epilot360/ 喷发

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

特征

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

安装

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

使用量

基本用途

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

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

带有自定义大小

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

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

无障碍

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>
  );
}

带有自定义样式

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

设置

# 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捆绑:

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

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

导入地图配置 :

{
  "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. 创建拉动请求

许可证

麻省理工学院