Logo

The ZitDevs mark, as the horizontal lock-up or the symbol.

import { Logo } from '@zitdevs/ui';

Examples

<Logo label="ZitDevs" />
<span className="text-on-primary">
  <Logo tone="mono" height={30} label="ZitDevs" />
</span>
<a href="/">
  <Logo /> {/* named by the link */}
  <span className="sr-only">ZitDevs home</span>
</a>

Props

Prop	Type	Default	Notes
variant	'horizontal' | 'symbol'	'horizontal'
tone	'color' | 'mono'	'color'	mono draws in currentColor: set the colour on a parent.
height	number	32	px. The width follows the lock-up’s proportions.
label	string	—	Accessible name. Omit it inside a link that already names itself.
ref	Ref<SVGSVGElement>	—	The <svg>.
className	string	—	Placement.
anything else	<svg> attributes	—	Except the size, the viewBox and the ARIA naming attributes.

Exported types: LogoProps, LogoVariant, LogoTone.

Accessibility

• With label it is an image with that name; without, it is aria-hidden, for a link or a heading that already says the name.

Without JavaScript

Inline SVG: no request, nothing to run.

Theming

The full-colour mark is drawn in the palette (fill-zd-orange, fill-zd-blue, fill-zd-navy), not in the roles, on purpose: the identity manual allows no recolouring, and the mark stays the ZitDevs mark under any theme. The mono tone follows its text. Add no shadows or effects.

The same artwork is in @zitdevs/tokens/brand/ as SVG files, for places a component cannot go.