Logo
A theme-aware logo component that automatically switches between light and dark versions based on the current theme. Comes in four variants to fit different layout needs, completely customizable.
Preview
Usage
import {
LogoIcon,
LogoIconBackground,
LogoExtended,
LogoBackgroundExtended
} from "@/components/ui/logo"
export default function Page() {
return (
<LogoIcon/>
//<LogoIconBackground/>
//<LogoExtended/>
//<LogoBackgroundExtended/>
)
}Variants
| Variant | Description |
|---|---|
LogoIcon | A plain logo icon with no background. |
LogoIconBackground | A logo icon with a primary colored background. |
LogoExtended | A logo icon with the brand name displayed next to it. |
LogoBackgroundExtended | A logo icon with a primary colored background and the brand name next to it. |
Customization
To use your own logo, update the Logo object at the top of the file:
const Logo = {
light: '/your-logo.svg',
dark: '/your-logo-dark.svg',
alt: 'Your Brand',
name: 'Your Brand'
}The logo.tsx file already comes in the EasyToLaunch repo by default.