LogoMark

Live preview

Loading example…

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

Import

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

Usage

<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

Source

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