@brightlocal/illustrations

BrightLocal Design System Illustrations - A collection of custom SVG illustrations.

Installation

pnpm add @brightlocal/illustrations

Usage

import { BusinessLocation } from "@brightlocal/illustrations";

function App() {
  return (
    <div>
      {/* Default size (250x250) */}
      <BusinessLocation />

      {/* Custom size */}
      <BusinessLocation size={400} />

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

Direct imports

You can also import illustrations directly:

import { BusinessLocation } from "@brightlocal/illustrations/illustrations/business-location";

Props

All illustrations accept standard SVG props plus:

• size - Illustration size in pixels for both width and height (default: 250)
• className - CSS classes for additional styling

Examples

// Default size (250x250)
<BusinessLocation />
<HandWave />
<Star />

// Custom size
<BusinessLocation size={400} />
<HandWave size={300} />

// Small illustrations
<Star size={150} />

// Large illustrations
<BusinessLocation size={500} />

// Responsive with Tailwind classes
<BusinessLocation className="w-full h-auto max-w-md" />

Theme Support

All illustrations automatically switch between light and dark mode based on the current theme using Tailwind's dark: variant.

License

UNLICENSED