dingbatch

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

Install

``bash
npm install dingbatch
`

Usage

$3

`ts
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: "" // Complete SVG string
// }
`

$3

`ts
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
`

$3

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

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

$3

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

React Components

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

// Generic component - pass any shape


// Shape-specific component



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

$3

| 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 |

$3

| 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:

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

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

License

MIT