Icon System

@hua-labs/ui

3 Providers

SSR-safe

3개 아이콘 라이브러리 통합 시스템. Lucide, Phosphor, Iconsax 지원.

$npm install @hua-labs/ui

아이콘 프로바이더

Lucide

기본 내장 아이콘. Tree-shakeable.

ESM 기반 tree-shaking
strokeWidth 지원
기본 포함

Phosphor

Weight 기반 아이콘. 6가지 스타일.

동적 로딩
thin/light/regular/bold/duotone/fill
peerDependency

Iconsax

SVG 기반 아이콘. 동적 로딩.

비동기 로딩
SVG 기반
캐시 지원

기본 사용법

아이콘 컴포넌트

tsx

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

// 기본 사용
<Icon name="heart" />
<Icon name="user" size={24} />
<Icon name="check" variant="success" />

// 애니메이션
<Icon name="loader" spin />
<Icon name="heart" pulse />
<Icon name="bell" bounce />

// 감정/상태 아이콘
<Icon emotion="happy" />
<Icon status="loading" spin />

IconProvider

tsx

import { Icon, IconProvider } from '@hua-labs/ui';

// 전역 설정
<IconProvider set="phosphor" weight="regular" size={20}>
  <App />
</IconProvider>

// 개별 오버라이드
<Icon name="heart" provider="lucide" size={32} />

프로바이더별 사용

tsx

// Lucide (기본)
<Icon name="heart" provider="lucide" strokeWidth={1.5} />

// Phosphor (weight 지원)
<Icon name="heart" provider="phosphor" weight="duotone" />

// Iconsax
<Icon name="heart" provider="iconsax" />

API Reference

<Icon />

Prop	Type	설명
name	AllIconName	아이콘 이름 (필수)
size	number \| string	아이콘 크기
provider	lucide \| phosphor \| iconsax	아이콘 프로바이더
weight	thin \| light \| regular \| bold \| duotone \| fill	Phosphor weight
variant	default \| primary \| success \| warning \| error \| muted	색상 변형
spin	boolean	회전 애니메이션
pulse	boolean	펄스 애니메이션
emotion	happy \| sad \| neutral \| excited \| angry \| love	감정 아이콘
status	loading \| success \| error \| warning \| info	상태 아이콘

<IconProvider />

Prop	Type	Default
set	lucide \| phosphor \| iconsax	phosphor
weight	PhosphorWeight	regular
size	number	20
strokeWidth	number	1.25

특화 컴포넌트

tsx

import {
  LoadingIcon,
  SuccessIcon,
  ErrorIcon,
  EmotionIcon,
  StatusIcon
} from '@hua-labs/ui';

<LoadingIcon />        // 로딩 스피너
<SuccessIcon />        // 성공 체크
<ErrorIcon />          // 에러 표시
<EmotionIcon emotion="happy" />
<StatusIcon status="warning" />

아이콘 별칭

직관적인 이름으로 아이콘을 사용할 수 있습니다.

tsx

// 모두 같은 아이콘
<Icon name="back" />      // → arrowLeft
<Icon name="prev" />      // → arrowLeft
<Icon name="previous" />  // → arrowLeft
<Icon name="arrowLeft" /> // → arrowLeft

// 주요 별칭
// Navigation: back, prev → arrowLeft
// Actions: plus, new → add
// Status: spinner, loading → loader
// User: person, account, profile → user
// Settings: gear, config → settings