v0.5.14

Logo

SVG logo with logomark, vertical, logo, and wordmark variants

Installation

pnpm add @wandercom/design-system-web

Usage

5 lines
import { Logo } from '@wandercom/design-system-web/ui/logo';

export function Example() {
  return <Logo />;
}

Sizing

Size using standard width/height props or Tailwind classes:

6 lines
<Logo variant="logo" width={150} height={40} />
<Logo variant="logomark" width={50} height={50} />

{/* Using Tailwind size classes */}
<Logo variant="logo" className="w-32 h-auto" />
<Logo variant="logomark" className="size-12" /> {/* if using Tailwind v4 */}

Theming

Inherits text color via currentColor:

3 lines
<div className="text-primary">
  <Logo variant="logo" />
</div>

Variants

Loading example...
1 lines
<Logo variant="logo" />

Logomark

Loading example...
1 lines
<Logo variant="logomark" />

Wordmark

Loading example...
1 lines
<Logo variant="wordmark" />

Vertical

Loading example...
1 lines
<Logo variant="vertical" />

Props

variant

'logomark' | 'vertical' | 'logo' | 'wordmark'
Presentation variant. 'logomark' compact circular mark (100×107), 'logo' horizontal (200×45), 'vertical' stacked (200×136), 'wordmark' text-only (200×45). Defaults to 'logo'.

className

string
Additional CSS classes.
Logo