Skip to content
Docs
컴포넌트로 돌아가기

Icon

@hua-labs/hua-ui
v1.0.0

여러 아이콘 라이브러리(Phosphor, Lucide, Iconsax)를 지원하는 통합 아이콘 컴포넌트입니다.

설치

bash
npm install @hua-labs/hua
Import
tsx
import { Icon, IconProvider } from "@hua-labs/hua";

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

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

라이브 데모

기본 사용법

다양한 아이콘을 표시합니다.

크기

size={16, 20, 24, 32, 48}

16
20
24
32
48

Phosphor Weight

6가지 weight 지원: thin, light, regular, bold, duotone, fill

thin
light
regular
bold
duotone
fill

색상 변형

default
primary
secondary
success
warning
error
muted

애니메이션

spin
pulse
bounce

프로바이더 비교

같은 아이콘을 다른 라이브러리로 표시

Phosphor

6가지 weight 지원

Lucide

strokeWidth 지원

Iconsax

다양한 스타일

케이스 정규화

kebab-case, camelCase, PascalCase 모두 지원됩니다.

Lucide
heart
Heart
arrow-left
arrowLeft
Phosphor
heart
Heart
arrow-left
Iconsax
heart
Heart
HEART

Props

이름타입기본값설명
name*AllIconName-아이콘 이름
sizenumber | string20아이콘 크기 (px)
provider"lucide" | "phosphor" | "iconsax""phosphor"Icon provider to use (overrides global setting)
weight"thin" | "light" | "regular" | "bold" | "duotone" | "fill""regular"Phosphor 아이콘 weight
variant"default" | "primary" | "secondary" | "success" | "warning" | "error" | "muted""default"색상 변형
spinbooleanfalse회전 애니메이션
pulsebooleanfalse펄스 애니메이션
bouncebooleanfalse바운스 애니메이션
animatedbooleanfalseEnable animation (general)
emotion"happy" | "sad" | "neutral" | "excited" | "angry" | "love" | "like" | "dislike"-Emotion icon type (happy, sad, angry, etc.)
status"success" | "error" | "warning" | "info" | "loading" | "locked" | "unlocked" | "visible" | "hidden"-Status icon type (loading, success, error, etc.)
aria-labelstring-Accessible label for meaningful icons
aria-hiddenbooleantrueHide from screen readers (decorative icons)

IconProvider

Props

이름타입기본값설명
set"lucide" | "phosphor" | "iconsax""phosphor"Default icon set for all child icons
weight"thin" | "light" | "regular" | "bold" | "duotone" | "fill""regular"Phosphor 아이콘 weight
sizenumber20아이콘 크기 (px)
colorstring"currentColor"Default icon color
strokeWidthnumber1.25Default stroke width (Lucide/Iconsax)
iconsaxVariant"line" | "bold""line"Iconsax 아이콘 변형 스타일

코드 예시

기본 사용법

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

export function BasicIcons() {
  return (
    <div className="flex gap-4">
      <Icon name="heart" />
      <Icon name="user" />
      <Icon name="settings" />
      <Icon name="bell" />
      <Icon name="search" />
    </div>
  );
}

크기 조절

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

export function IconSizes() {
  return (
    <div className="flex items-center gap-4">
      <Icon name="star" size={16} />
      <Icon name="star" size={20} />
      <Icon name="star" size={24} />
      <Icon name="star" size={32} />
      <Icon name="star" size={48} />
    </div>
  );
}

IconProvider 사용

ProviderExample.tsxtsx
import { Icon, IconProvider } from '@hua-labs/hua-ui';
import '@hua-labs/ui/lucide';   // Register lucide resolver
import '@hua-labs/ui/iconsax';  // Register iconsax resolver

export function ProviderExample() {
  return (
    <div className="space-y-6">
      {/* Phosphor (default) - weight supported */}
      <IconProvider set="phosphor" weight="duotone" size={24}>
        <div className="flex gap-4">
          <Icon name="heart" />
          <Icon name="user" />
          <Icon name="bell" />
        </div>
      </IconProvider>

      {/* Lucide - strokeWidth supported */}
      <IconProvider set="lucide" size={24} strokeWidth={1.5}>
        <div className="flex gap-4">
          <Icon name="heart" />
          <Icon name="user" />
          <Icon name="bell" />
        </div>
      </IconProvider>

      {/* Iconsax */}
      <IconProvider set="iconsax" size={24}>
        <div className="flex gap-4">
          <Icon name="heart" />
          <Icon name="user" />
          <Icon name="bell" />
        </div>
      </IconProvider>
    </div>
  );
}

Phosphor Weight 변형

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

// Phosphor only - 6 weights
export function PhosphorWeights() {
  return (
    <div className="flex gap-4">
      <Icon name="heart" weight="thin" />
      <Icon name="heart" weight="light" />
      <Icon name="heart" weight="regular" />
      <Icon name="heart" weight="bold" />
      <Icon name="heart" weight="duotone" />
      <Icon name="heart" weight="fill" />
    </div>
  );
}

색상 변형

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

export function ColorVariants() {
  return (
    <div className="flex gap-4">
      <Icon name="circle" variant="default" />
      <Icon name="circle" variant="primary" />
      <Icon name="circle" variant="secondary" />
      <Icon name="circle" variant="success" />
      <Icon name="circle" variant="warning" />
      <Icon name="circle" variant="error" />
      <Icon name="circle" variant="muted" />
    </div>
  );
}

애니메이션

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

export function AnimatedIcons() {
  return (
    <div className="flex gap-6">
      {/* Spin animation */}
      <Icon name="loader" spin />

      {/* Pulse animation */}
      <Icon name="heart" pulse variant="error" />

      {/* Bounce animation */}
      <Icon name="bell" bounce variant="warning" />
    </div>
  );
}

특수 아이콘

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

export function SpecialIcons() {
  return (
    <div className="space-y-4">
      {/* Emotion icons */}
      <div className="flex gap-4">
        <EmotionIcon emotion="happy" />
        <EmotionIcon emotion="sad" />
        <EmotionIcon emotion="angry" />
      </div>

      {/* Status icons */}
      <div className="flex gap-4">
        <StatusIcon status="loading" spin />
        <StatusIcon status="success" variant="success" />
        <StatusIcon status="error" variant="error" />
      </div>

      {/* Preset icons */}
      <div className="flex gap-4">
        <LoadingIcon />
        <SuccessIcon />
        <ErrorIcon />
      </div>
    </div>
  );
}

접근성

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

export function AccessibleIcons() {
  return (
    <div className="flex gap-4">
      {/* Decorative icon (default) - hidden from screen readers */}
      <span>
        <Icon name="star" aria-hidden />
        Premium
      </span>

      {/* Meaningful icon - provide label */}
      <button>
        <Icon name="trash" aria-label="Delete" />
      </button>

      {/* Search button */}
      <button>
        <Icon name="search" aria-label="Search" />
      </button>
    </div>
  );
}

프로바이더 비교

기능PhosphorLucideIconsax
아이콘 수6,000+1,400+1,000+
Weight/Style
6 weights
strokeWidth
Linear/Bold
기본값✅--
특징듀오톤 스타일 지원일관된 디자인모던 스타일

접근성

  • •장식적 아이콘: 의미 없는 아이콘은 기본적으로 aria-hidden='true' 처리
  • •의미 있는 아이콘: 정보를 전달하는 아이콘에는 aria-label 제공
  • •버튼 아이콘: 아이콘만 있는 버튼은 aria-label로 접근 가능한 레이블 필요
  • •색상 대비: 아이콘 색상은 배경과 충분한 대비를 유지해야 함