Logo, Cairn

Show code

import { Logo, LogoMark } from '@six-vallees/ui-react';

export default function LogoDemo() {
  return (
    <div className="flex flex-col gap-8">
      <div className="flex items-center gap-8 text-on-surface">
        <LogoMark className="h-10 w-auto" />
        <Logo className="h-6 w-auto" />
      </div>
      <div className="flex items-center gap-8 text-on-surface-variant">
        <LogoMark className="h-10 w-auto" />
        <Logo className="h-6 w-auto" />
      </div>
    </div>
  );
}

Logo is the wordmark; LogoMark is the symbol. Both inheritcurrentColor, set it with text-*.

import { Logo, LogoMark } from '@six-vallees/ui-react';

// wordmark
<Logo className="h-6 w-auto text-on-surface" />

// compact symbol
<LogoMark className="h-9 w-auto text-on-surface" />

Brand assets live in @six-vallees/ui-react, imported directly, not distributed via the registry.

Prop	Type	Default
title	string Accessible name. Pass "" for a purely decorative mark (aria-hidden).	'Six Vallées'
className	string Size (h-, w-auto) and colour (text-). Colour follows currentColor.	-
...props	SVGProps Any native <svg> attribute.	-

Shared by both Logo and LogoMark.