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

Display the Scribe logo.

className

string

Classes applied to the root SVG.

---

glyphClassName

string

Classes applied to the scribe glyph (icon) paths.

---

wordmarkClassName

string

Classes applied to the “Scribe” wordmark paths.

---