Skip to content

Logo

The Logo component displays your brand logo with automatic dark mode switching.

Basic Usage

---
import Logo from '@/components/ui/Logo.astro';
---

<Logo />

Sizes

<Logo size="sm" />  <!-- 20x20 -->
<Logo size="md" />  <!-- 24x24 -->
<Logo size="lg" />  <!-- 32x32 -->
<Logo size="xl" />  <!-- 48x48 -->
<Logo size="2xl" /> <!-- 96x96 -->

Variants

<!-- Icon only -->
<Logo variant="logomark" />

<!-- Full logo with text -->
<Logo variant="full" />

Force Dark Version

For dark backgrounds where you need the light version:

<section class="bg-surface-invert">
  <Logo forceDark />
</section>

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`'md'`	Logo size
`variant`	`'logomark' \| 'full'`	`'logomark'`	Logo type
`forceDark`	`boolean`	`false`	Force dark version

Logo Files

Replace the SVG files in src/assets/branding/:

File	Purpose
`logomark.svg`	Icon for light backgrounds
`logomark-dark.svg`	Icon for dark backgrounds
`logo-full.svg`	Full logo for light backgrounds
`logo-full-dark.svg`	Full logo for dark backgrounds

Automatic Switching

The Logo component automatically switches between light and dark versions based on:

The current theme (.dark class on <html>)
The forceDark prop for manual override

Examples

<header class="flex items-center justify-between">
  <a href="/">
    <Logo variant="full" size="lg" />
  </a>
  <nav>...</nav>
</header>

<footer class="bg-surface-invert">
  <Logo variant="full" size="xl" forceDark />
</footer>

Favicon

The logomark is also used as the favicon. Update public/favicon.svg with your icon.