HyLogo

A logo component that switches between light and dark variants based on theme property. Provides a simple, performant way to display logos with theme-aware switching.

Key Features

• Manual theme control via theme property ('light' or 'dark')
• Accessibility support with proper alt text
• Optional link wrapper functionality
• Optimized for SSR/CSR consistency

Styling

This component uses design system tokens for consistent theming:

• Focus outline color: --hy-focus-ring-color

Available CSS classes for custom styling:

• .logo-container - Main wrapper element that contains the logo
• .logo-img - The actual logo image element

CSS Variables:

• --hy-focus-ring-color - Color for focus outline (used for accessibility)

Examples

Basic usage

<hy-logo light-src="/logo-light.svg" dark-src="/logo-dark.svg" alt="Company Logo" theme="light">
</hy-logo>

With custom link

<hy-logo
  light-src="/logo-light.svg"
  dark-src="/logo-dark.svg"
  alt="Brand Logo"
  href="/home"
  theme="dark"
>
</hy-logo>

With fixed dimensions

<hy-logo
  light-src="/logo-light.svg"
  dark-src="/logo-dark.svg"
  alt="Company Logo"
  width="200"
  height="60"
  theme="light"
>
</hy-logo>

Custom styling via CSS

hy-logo {
  --hy-focus-ring-color: #1565c0;
}

hy-logo .logo-img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}