Logo

Optimized Raft mark, wordmark, and combined lockup SVGs.

Preview#

Decorative mark beside visible brand text

Anatomy#

import { RaftLogo, RaftLogoLockup, RaftWordmark } from "raft-ui";

<RaftLogo role="img" aria-label="Raft" />
<RaftWordmark role="img" aria-label="Raft" />
<RaftLogoLockup role="img" aria-label="Raft" />

Accessibility#

Give a standalone brand graphic an accessible name. When visible text already names the brand, hide the repeated SVG from assistive technology.

<RaftLogo role="img" aria-label="Raft" />

<div>
  <RaftLogo aria-hidden />
  <span>Raft</span>
</div>

API#WIP

RaftLogo#

Prop	Type	Default	Description
`...props`	ComponentPropsWithoutRef<"svg">	—	Standalone Raft mark. Size it with native SVG props or className.

RaftWordmark#

Prop	Type	Default	Description
`...props`	ComponentPropsWithoutRef<"svg">	—	Standalone Raft wordmark with its own fitted viewBox.

RaftLogoLockup#

Prop	Type	Default	Description
`...props`	ComponentPropsWithoutRef<"svg">	—	Combined mark and wordmark lockup in one SVG.