Logo
A logo is a visual representation of a brand or app.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Logo } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| name * | string | — | The product or brand name. It is the accessible name, and the wordmark when no mark is given. |
| mark | ReactNode | — | The symbol. With a name beside it the pair reads as a lockup. |
Accessibility
What the component does for you, and what it needs from you.
- The name is the accessible name, so the logo is announced as the product rather than as an image.
- When the logo is a link home, the link is what carries the name and the mark inside it is decorative.
- The mark should not be the only way to tell two products apart, because marks are small and often similar.