Logo

v1.0.0

bash

npm install @hua-labs/hua

tsx

import { Logo } from "@hua-labs/hua";

symbol (default) / full

symbol

full

sm (1rem) / md (1.5rem) / lg (2rem) / custom

3rem

Path drawing effect

animated symbol

animated full

Props


`variant`	`"symbol" \| "full"`	`"symbol"`	Logo variant - symbol only or with wordmark
`size`	`"sm" \| "md" \| "lg" \| number`	`"md"`	Logo size (sm=1rem, md=1.5rem, lg=2rem) or custom rem value
`animated`	`boolean`	`false`	Enable path drawing animation
`className`	`string`	-	Additional CSS classes

docs:common.basicUsage

tsx

import { Logo } from '@hua-labs/ui/advanced';

export function BasicLogo() {
  return (
    <div className="flex items-center gap-8">
      {/* Symbol only (default) */}
      <Logo />

      {/* Full logo with wordmark */}
      <Logo variant="full" />
    </div>
  );
}

docs:common.sizes

tsx

import { Logo } from '@hua-labs/ui/advanced';

export function LogoSizes() {
  return (
    <div className="flex items-center gap-8">
      <Logo size="sm" />
      <Logo size="md" />
      <Logo size="lg" />
      <Logo size={3} /> {/* 3rem */}
    </div>
  );
}

docs:common.animation

tsx

import { Logo } from '@hua-labs/ui/advanced';

export function AnimatedLogo() {
  return (
    <div className="flex items-center gap-8">
      <Logo animated size="lg" />
      <Logo variant="full" animated size="lg" />
    </div>
  );
}

•Decorative: Logo is typically decorative, hidden from screen readers by default
•SVG: Uses inline SVG for crisp rendering at any size
•Color: Inherits currentColor for easy theming

Scrollbar Parallax