dingbatch

Parametric MCM (Mid-Century Modern) dingbat shapes as SVGs. Curated presets with full customization.

Install

npm install dingbatch

Usage

Basic - Use Presets

import { boomerang } from 'dingbatch';

// Get a preset shape
const shape = boomerang.crescent();

// Returns:
// {
//   path: "M...",        // SVG path d attribute
//   width: 100,          // Bounding width
//   height: 80,          // Bounding height
//   viewBox: "0 0 100 80",
//   svg: "<svg>...</svg>" // Complete SVG string
// }

Available Presets

boomerang.crescent()      // Curved arc/moon shape
boomerang.fatMoon()       // Wide crescent, rounded tips
boomerang.sharpChevron()  // Solid V-shape arrow
boomerang.thinArc()       // Narrow curved arc
boomerang.horseshoe()     // U-shape

With Overrides

// Rotate a preset
boomerang.crescent({ rotation: 45 })

// Change any parameter
boomerang.fatMoon({ thickness: 60, taper: 0.8 })

Full Custom

boomerang({
  style: 'crescent',
  armLength: 50,
  bendAngle: 160,
  thickness: 35,
  taper: 0.5,
  tipRoundness: 0.2,
  rotation: 0,
})

React Components

import { Dingbat, Boomerang } from 'dingbatch/react';
import { boomerang } from 'dingbatch';

// Generic component - pass any shape
<Dingbat shape={boomerang.crescent()} fill="#D4A03D" />

// Shape-specific component
<Boomerang preset="crescent" fill="#D4A03D" />
<Boomerang preset="fatMoon" rotation={45} className="hero-deco" />

// Custom params
<Boomerang
  params={{ style: 'chevron', armLength: 60, bendAngle: 70, thickness: 30, taper: 1, tipRoundness: 0 }}
  fill="#1A1A1A"
/>

Dingbat Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | shape | DingbatResult | required | Shape object from generator | | fill | string | 'currentColor' | Fill color | | stroke | string | 'none' | Stroke color | | strokeWidth | number | 0 | Stroke width | | className | string | - | CSS class | | style | CSSProperties | - | Inline styles |

Boomerang Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | preset | string | 'crescent' | Preset name | | params | BoomerangParams | - | Full custom params (overrides preset) | | rotation | number | - | Rotation in degrees | | + all Dingbat props | | | |

Boomerang Styles

The boomerang generator supports 4 geometric styles:

• crescent - Curved arc/moon shape
• classic - Traditional boomerang with two diverging arms
• horseshoe - U-shape with parallel arms
• chevron - Solid V-shape or arrow

Parameters

| Parameter | Type | Description | |-----------|------|-------------| | style | 'classic' \| 'crescent' \| 'horseshoe' \| 'chevron' | Geometry mode | | armLength | number | Length of arms or arc radius | | bendAngle | number | Angle between arms or arc span | | thickness | number | Shape thickness | | taper | number | Tip thickness ratio (0=pointed, 1=uniform) | | tipRoundness | number | How rounded the tips are (0-1) | | armCurvature | number | Curve amount for classic/horseshoe (0-1) | | bendSharpness | number | Bend smoothness for classic (0-1) | | armBalance | number | Asymmetric arm lengths (0.5-2) | | rotation | number | Rotation in degrees |

TypeScript

Full TypeScript support with exported types:

import type {
  DingbatResult,
  BoomerangParams,
  BoomerangStyle
} from 'dingbatch';

import type {
  DingbatProps,
  BoomerangProps
} from 'dingbatch/react';

License

MIT