npm package: @iconoma-icons/collection
Description: Official style collections for Iconoma — 8 deterministic SVG icon styles.
Author: 0xnocap
Latest version: 1.0.0

# @iconoma-icons/collection

8 built-in styles and 8 color palettes for [Iconoma](https://github.com/0xnocap/iconoma).

## Install

```bash
npm install @iconoma-icons/core @iconoma-icons/collection
```

Both packages are required — `core` is the engine, `collection` has the styles.

## Quick Start

```js
import { createIcon } from '@iconoma-icons/core';
import { pixel, waves, mondrian } from '@iconoma-icons/collection';

// Generate icons — same seed always produces the same icon
const avatar = createIcon(pixel, { seed: 'user@example.com' });
const banner = createIcon(waves, { seed: 'project-123', size: 512 });

// Use as HTML
document.getElementById('avatar').innerHTML = avatar.toString();

// Use as image source
document.getElementById('img').src = banner.toDataUri();
```

---

## Styles

### `pixel` — Blocky

Cellular automaton that generates symmetric creature-like figures on a solid background. Think GitHub-style identicons but more organic.

```js
createIcon(pixel, {
  seed: 'alice',
  styleOptions: {
    seedDensity: 0.45,    // 0.3–0.6    How densely populated the initial grid is
    generations: 3,        // 2–5        Number of Game-of-Life-style iterations
    maxCells: 15,          // 12–20      Maximum cells allowed (rejects too-dense results)
    marginSize: 0.15,      // 0.1–0.2    Margin around figure as proportion of canvas
  }
});
```

### `pixelated` — Pixel Grid

Symmetric pixel art on a colored background. Patterns can be diagonal stripes, concentric rings, scattered dots, or clusters.

```js
createIcon(pixelated, {
  seed: 'bob',
  styleOptions: {
    blockSize: 8,                   // 4–16         Size of each pixel block
    patternType: 'concentric',      // 'random' | 'diagonal' | 'concentric' | 'scattered' | 'clustered'
    colorVariation: 0.5,            // 0–1          How much colors vary between blocks
    colorsPerIcon: 4,               // 2–5          How many palette colors to use
  }
});
```

### `mondrian` — Rectangular Composition

Piet Mondrian-inspired layout — colored rectangles separated by thick lines.

```js
createIcon(mondrian, {
  seed: 'charlie',
  styleOptions: {
    divisionCount: 10,     // 4–20       Number of rectangular divisions
    lineThickness: 3,      // 1–8        Black dividing line width in px
    balance: 0.5,          // 0–1        0 = structured grid, 1 = random layout
    colorsPerIcon: 4,      // 2–5        How many palette colors to use
  }
});
```

### `gradient` — Smooth Gradients

Multi-stop linear gradient fills. Clean and minimal.

```js
createIcon(gradient, {
  seed: 'dana',
  styleOptions: {
    waveComplexity: 3,              // 1–5          Number of color stops in gradient
    direction: 'diagonal',          // 'horizontal' | 'vertical' | 'diagonal' | 'radial' | 'randomize'
    blendSmoothness: 0.7,           // 0–1          How smoothly colors transition
  }
});
```

### `mosaic` — Voronoi Tiles

Irregular polygon tiles filling the canvas — like broken glass or a stone mosaic.

```js
createIcon(mosaic, {
  seed: 'eve',
  styleOptions: {
    tileCount: 80,            // 20–200      Number of tiles
    tileSizeVariation: 0.5,   // 0–1         0 = uniform tiles, 1 = varied sizes
    gapSize: 1,               // 0–4         Gap between tiles in px
    colorsPerIcon: 4,         // 2–5         How many palette colors to use
  }
});
```

### `waves` — Layered Waves

Stacked sinusoidal wave bands. Each wave layer uses a different palette color.

```js
createIcon(waves, {
  seed: 'frank',
  styleOptions: {
    waveCount: 4,               // 1–8         Number of wave layers
    amplitude: 0.25,            // 0.1–0.5     Wave height as proportion of canvas
    frequency: 3,               // 1–8         Number of wave cycles across canvas
    direction: 'horizontal',    // 'horizontal' | 'vertical' | 'diagonal' | 'radial' | 'randomize'
  }
});
```

### `polycon` — Geometric Grid

Grid of triangles and full squares on a colored background. Clean and geometric.

```js
createIcon(polycon, {
  seed: 'grace',
  styleOptions: {
    gridSize: 3,                // 2 | 3 | 4     Grid dimensions (2×2, 3×3, or 4×4)
    emptyProbability: 0.15,     // 0–1            Chance a cell is empty (bg shows through)
    fullSquareProbability: 0.10,// 0–1            Chance cell is a full square vs triangle
    colorsPerIcon: 3,           // 2–5            How many palette colors to use
  }
});
```

### `inkblot` — Rorschach Blobs

Symmetric organic blob shapes — like a Rorschach test card.

```js
createIcon(inkblot, {
  seed: 'heidi',
  styleOptions: {
    blobCount: 3,             // 1–6           Number of blob shapes
    spread: 0.5,              // 0.2–0.8       How spread out blobs are from center
    symmetry: 'vertical',     // 'none' | 'horizontal' | 'vertical' | 'both'
    centered: false,          // true = centered, false = offset allowed
  }
});
```

---

## Color Palettes

8 built-in palettes. Each is an array of 5 hex color strings.

```js
import { palettes, paletteNames, DEFAULT_COLORS } from '@iconoma-icons/collection';

// List all palette names
console.log(paletteNames);
// → ['sunset', 'ocean', 'forest', 'neon', 'pastel', 'earth', 'mono', 'candy']

// Use a palette
const icon = createIcon(pixel, {
  seed: 'demo',
  colors: [...palettes.ocean],
});

// DEFAULT_COLORS is the 'neon' palette
console.log(DEFAULT_COLORS);
// → ['#FF006E', '#8338EC', '#3A86FF', '#FFBE0B', '#FB5607']
```

| Palette | Colors |
|---------|--------|
| **sunset** | `#FF6B6B` `#FF8E53` `#FFC857` `#E85D75` `#4A1942` |
| **ocean** | `#0077B6` `#00B4D8` `#90E0EF` `#023E8A` `#CAF0F8` |
| **forest** | `#2D6A4F` `#40916C` `#74C69D` `#1B4332` `#D8F3DC` |
| **neon** *(default)* | `#FF006E` `#8338EC` `#3A86FF` `#FFBE0B` `#FB5607` |
| **pastel** | `#FFB5A7` `#FCD5CE` `#F8EDEB` `#F9DCC4` `#FEC89A` |
| **earth** | `#BC6C25` `#DDA15E` `#606C38` `#283618` `#FEFAE0` |
| **mono** | `#F8F9FA` `#DEE2E6` `#ADB5BD` `#495057` `#212529` |
| **candy** | `#F72585` `#7209B7` `#3A0CA3` `#4361EE` `#4CC9F0` |

---

## Full Exports

```js
// Styles
import { pixel, pixelated, mondrian, gradient, mosaic, waves, polycon, inkblot } from '@iconoma-icons/collection';

// Palettes
import { palettes, paletteNames, DEFAULT_PALETTE, DEFAULT_COLORS } from '@iconoma-icons/collection';

// Types
import type { Palette, PaletteName } from '@iconoma-icons/collection';
import type {
  BlockyParams,        // pixel style options
  PixelParams,         // pixelated style options
  MondrianParams,      // mondrian style options
  GradientParams,      // gradient style options
  MosaicParams,        // mosaic style options
  WavesParams,         // waves style options
  PolyconParams,       // polycon style options
  InkblotParams,       // inkblot style options
  StyleParameters,     // union of all style params
} from '@iconoma-icons/collection';

// Default parameter values
import { DEFAULT_PARAMETERS } from '@iconoma-icons/collection';
```

## License

[MIT](../../LICENSE)