@epilot360/illustrations

A tree-shakable illustration library for the epilot platform. Built with React, TypeScript, and optimized for minimal bundle size.

Features

• 🎨 High-quality SVG illustrations created in Figma
• 📦 Tree-shakable - only import what you need
• ⚡ Optimized for performance - minimal bundle size
• 🎯 TypeScript support - full type safety
• ♿ Accessible - built with accessibility in mind
• 📱 Responsive - works on all screen sizes
• 🎛️ Customizable - flexible sizing and styling options

Installation

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

Usage

Basic Usage

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

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

With Custom Size

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

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

With Accessibility

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

With Custom Styling

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

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

Available Illustrations

CouponDiscount

A vibrant coupon discount illustration perfect for promotional content and marketing materials.

Props:

• size?: 'small' | 'medium' | 'large' - Predefined size variants
• width?: string | number - Custom width
• height?: string | number - Custom height
• className?: string - Additional CSS class
• style?: React.CSSProperties - Inline styles
• aria-label?: string - Accessibility label. If provided, the illustration will be accessible to screen readers. If not provided, the illustration will be decorative (hidden from screen readers).

Development

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Setup

# 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

Scripts

Documentation & Library

• npm run dev - Start development server for documentation
• npm run build:lib - Build the library for distribution
• npm run build:docs - Build the documentation site

SystemJS Bundle for Single-SPA

• npm run dev:bundle - Build and serve SystemJS bundle with Vite (http://localhost:3456)
• npm run build:bundle - Build SystemJS bundle for microfrontends
• npm run serve:bundle:vite - Serve built bundle with Vite preview server

Code Quality

• npm run type-check - Run TypeScript type checking
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint issues

Using in Single-SPA Microfrontends

This library can be used as a SystemJS bundle in single-spa applications:

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

The bundle will be available at http://localhost:3456/bundle.js with full CORS support.

Import Map Configuration:

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

The bundle uses:

• SystemJS format for single-spa compatibility
• Classic JSX transform (no react/jsx-runtime dependency)
• External React/ReactDOM (shared dependencies)

Bundle Size

The library is optimized for minimal bundle size:

• Tree-shakable: Only import the illustrations you need
• SVG-based: Vector graphics for crisp rendering at any size
• Minified: Production builds are minified and optimized
• No external dependencies: Zero runtime dependencies

Browser Support

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-illustration
3. Add your illustration following the existing patterns
4. Update documentation
5. Run tests and linting: npm run lint && npm run type-check
6. Commit your changes: git commit -m 'Add new illustration'
7. Push to the branch: git push origin feature/new-illustration
8. Create a Pull Request

License

MIT © Epilot