Logo

@hua-labs/ui/advanced

v1.0.0

HUA Labs official logo component. Supports symbol-only or full wordmark variants with optional path drawing animation.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

이 로고는 예시입니다. 실제 사용 시 컴포넌트의 SVG 경로를 자신의 로고로 교체하세요.

라이브 데모

변형

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"`	로고 변형 — 심볼만 또는 워드마크 포함
`size`	`"sm" \| "md" \| "lg" \| number`	`"md"`	로고 크기 (sm=1rem, md=1.5rem, lg=2rem) 또는 커스텀 rem 값
`animated`	`boolean`	`false`	경로 드로잉 애니메이션 활성화
`className`	`string`	-	추가 CSS 클래스

코드 예시

기본 사용법

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>
  );
}

크기

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>
  );
}

애니메이션

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>
  );
}

접근성

•장식 요소: 로고는 일반적으로 장식 요소로 취급되어 기본적으로 스크린 리더에서 숨겨집니다
•SVG: 인라인 SVG를 사용하여 어떤 크기에서도 선명하게 렌더링
•색상: currentColor를 상속하여 쉽게 테마 적용 가능

Scrollbar ThemeProvider