# LogoMark

> Renders a generated brand mark as an inline `<svg role="img">`.

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

Renders a generated brand mark as an inline `<svg role="img">`.

## Import

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

## Usage

```tsx
<LogoMark
  name="Barbería Don Lucho"
  tagline="Corte y navaja desde 1998"
  shape="shield"
  monogram="glyph"
  glyph="scissors"
  palette="navaja"
  layout="horizontal"
  fill="solid"
  seed={0}
  size={360}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `string \| number` | `"100%"` | CSS width of the mark; the height follows the aspect ratio. Defaults to the full container. |
| `className` | `string` |  |  |
| `name` * | `string` |  | Business name: drives the wordmark and the initials. |
| `tagline` | `string` |  |  |
| `initials` | `string` |  | Overrides the initials taken from `name`. |
| `shape` | `"circle" \| "none" \| "shield" \| "squircle" \| "hexagon" \| "badge" \| "ribbon"` |  |  |
| `monogram` | `"initials" \| "glyph"` |  |  |
| `glyph` | `"scissors" \| "comb" \| "razor" \| "pole" \| "star" \| "leaf" \| "bolt" \| "crown" \| "mustache"` |  |  |
| `initialsCount` | `1 \| 3 \| 2` |  |  |
| `palette` | `string \| BrandPalette` |  | A palette id from `BRAND_PALETTES` or a custom palette. |
| `layout` | `"icon" \| "horizontal" \| "stacked"` |  |  |
| `fill` | `"solid" \| "outline" \| "gradient"` |  |  |
| `seed` | `number` |  | 0 is the canonical look; other values deterministically vary angle, tilt, ring and color order. |
| `ring` | `boolean` |  | Inner ring; left undefined it follows the seed. |
| `wordmark` | `WordmarkStyle` |  |  |
| `background` | `string` |  | Paints a padded background rectangle behind the mark. |
| `wordmarkColor` | `string` |  | Overrides the wordmark color (use a light one over a dark background). |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/foundations-logomark--default)
- [Stacked](/storybook/?path=/story/foundations-logomark--stacked)
- [Initials](/storybook/?path=/story/foundations-logomark--initials)
- [Narrow](/storybook/?path=/story/foundations-logomark--narrow)
- [Gallery](/storybook/?path=/story/foundations-logomark--gallery)

## Source

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