# LogoForge

> Interactive brand-mark editor: pick a shape, monogram, palette and layout, browse twelve seeded variations, then download SVG or PNG or copy the SVG source.

Source: https://ui.jcsoftdev.com/docs/components/logo-forge

Interactive brand-mark editor: pick a shape, monogram, palette and layout, browse twelve
seeded variations, then download SVG or PNG or copy the SVG source. The chrome follows
`data-style` and the active theme; the marks keep their own palettes.

## Import

```ts
import { LogoForge } from "@jcsoftdev/ui/brand";
```

## Usage

```tsx
<LogoForge />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `Partial<LogoForgeValue>` |  |  |
| `onChange` | `((options: MarkOptions) => void)` |  | Called with the generator options each time the editor changes. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/foundations-logoforge--default)
- [Narrow](/storybook/?path=/story/foundations-logoforge--narrow)
- [Brutal Preset](/storybook/?path=/story/foundations-logoforge--brutal-preset)
- [Barbería Don Lucho](/storybook/?path=/story/foundations-logoforge--barberia-don-lucho)

## Source

`packages/ui/src/brand/logo-forge.tsx`