Logo

The Scaler brand mark, drawn as inline SVG so it picks up whatever text color surrounds it. Reach for it on the standalone screens the app shell doesn't own — auth pages, supplier disclosure, print headers. Inside the shell, the rail already renders its own via RailLogo.

There is no size prop: give it a height (h-6, h-8) and it scales, keeping its 3:1 aspect ratio. A w-* class only pads the box.

import { ScalerLogo } from '@scaler-tech/aurora/logo'

Wordmark (default)

Compact glyph

Sized with a height utility

Inherits the text color

Explicit color prop

API

Prop	Type	Default	Description
compact	boolean	false	Renders the icon-only glyph instead of the full wordmark
color	string	'currentColor'	Any CSS color value, painted into every path; overrides inheritance. The web-app's own Logo.vue wrapper uses this for environment tinting — Aurora's mark stays environment-agnostic

<ScalerLogo class="h-6 text-primary" />

Gotchas

• fill-* utilities do nothing here. Every path carries its own fill presentation attribute, which beats a fill inherited from the <svg>. Recolor with a text-* class or the color prop instead.
• Don't reach for compact to shrink the logo in a collapsed app rail. RailLogo clips the full mark inside a narrowing window so the wordmark reveals as the rail expands; swapping in the glyph breaks that transition.