Logo

Usage

import { Logo } from "stylus-ui/Logo";

export default () => <Logo className="max-w-24" />;

Color

The logo will automatically adopt the current color of text. To change the logo’s color, change the text color with className. The wordmark and glyph can be styled independently with wordmarkClassName and glyphClassName.

import { Logo } from "stylus-ui/Logo";

export default () => (
  <Logo
    className="max-w-24"
    wordmarkClassName="text-slate-900 dark:text-slate-50"
    glyphClassName="text-brand-600"
  />
);

Sizing

The logo will consume available width. Resize it by putting it in a smaller container or passing a max-width or max-height to className.

import { Logo } from "stylus-ui/Logo";

export default () => <Logo className="max-w-24" />;

API Reference

Logo

Prop	Type	Default
className	string
glyphClassName	string
wordmarkClassName	string