Icon

아이콘 글리프에 라이브러리의 크기 축과 색 축을 붙여 주는 wrapper입니다. Neba는 아이콘 세트를 포함하지 않으므로, 글리프는 직접 고른 세트에서 가져옵니다.

import { Icon } from 'neba';

<Icon icon={<BoltIcon />} size="lg" color="warning" label="Fast" />;

Props

Prop	타입	기본값	설명
icon *	ReactNode	—	그릴 글리프. svg, img, 아이콘 세트의 컴포넌트, 문자를 받습니다. children이 아니라 prop이라서 크기와 색을 컴포넌트가 정할 수 있습니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	글리프가 그려지는 상자: 14 / 16 / 20 / 24 / 28px. 컨트롤 높이가 아니라 자체 사다리입니다. 아이콘은 컨트롤이 아니고, 32px짜리 md 글리프는 자기가 들어앉을 버튼만 해집니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'inherit'	'inherit'	의미론적 색 역할, 또는 감싼 것의 색을 그대로 받는 inherit. 라이브러리에서 기본값이 primary가 아닌 유일한 color입니다
label	string	—	아이콘이 하는 말. 없으면 접근성 트리에서 완전히 숨깁니다. 대부분의 아이콘 옆에는 같은 말을 하는 단어가 이미 있고, 둘 다 읽는 것은 하나만 읽는 것보다 나쁩니다
transition공통	NebaTransition	—	mount 시 한 번 실행되는 등장 애니메이션 (transition="fade"). 트리거나 반복이 필요하면 Animate* 컴포넌트로 감싸세요

글리프는 children이 아니라 icon prop으로 넘깁니다. 세트에서 가져온 요소의 크기와 색을 Icon이 직접 지정하기 위한 것으로, <Icon icon={<BoltIcon />} />처럼 씁니다.

<span>의 native 속성은 그대로 전달됩니다.

예시

size

컨트롤 높이가 아니라 아이콘 전용 단계입니다: 14 · 16 · 20 · 24 · 28px. 아이콘 세트들이 실제로 그려지는 크기이므로 글리프가 픽셀 격자에 맞아떨어지고 리샘플링되지 않습니다.

import { Icon, Typography } from 'neba';

function BellIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none">
      <path
        d="M4 6.5a4 4 0 0 1 8 0c0 3 1 4 1 4H3s1-1 1-4Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinejoin="round"
      />
      <path d="M6.5 13a1.5 1.5 0 0 0 3 0" stroke="currentColor" strokeWidth="1.5" />
    </svg>
  );
}

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function IconSizes() {
  return (
    <div className="flex flex-wrap items-end gap-6">
      {SIZES.map((size) => (
        <div key={size} className="flex flex-col items-center gap-2">
          <Icon icon={<BellIcon />} size={size} label={`Notifications, ${size}`} />
          <Typography level="caption">{size}</Typography>
        </div>
      ))}
    </div>
  );
}

color

color의 기본값은 inherit입니다. 라이브러리에서 기본값이 primary가 아닌 유일한 색 prop으로, 버튼 라벨이나 Alert 안처럼 이미 색이 정해진 자리에 놓았을 때 그 색을 그대로 물려받습니다. 역할 색을 쓰려면 명시적으로 지정하세요.

import { Button, Icon, Typography } from 'neba';

function CheckIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none">
      <path
        d="m3.5 8.5 3 3 6-6"
        stroke="currentColor"
        strokeWidth="1.75"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

const COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;

/**
 * `color` defaults to `inherit`, which is why the icon inside the button comes
 * out white without being told to. Naming a family opts out of that.
 */
export default function IconColors() {
  return (
    <div className="flex flex-col gap-5">
      <div className="flex flex-wrap items-center gap-4">
        {COLORS.map((color) => (
          <Icon key={color} icon={<CheckIcon />} color={color} size="lg" label={color} />
        ))}
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <Button startIcon={<Icon icon={<CheckIcon />} size="sm" />}>Approve</Button>
        <Button
          variant="outline"
          color="danger"
          startIcon={<Icon icon={<CheckIcon />} size="sm" />}
        >
          Reject
        </Button>
        <Typography level="caption">Both icons inherit; neither was given a colour.</Typography>
      </div>
    </div>
  );
}

label

label이 없으면 아이콘은 aria-hidden으로 접근성 트리에서 빠집니다. 옆에 같은 뜻의 텍스트가 이미 있는 경우가 대부분이므로 이것이 기본값입니다. 글리프만으로 뜻이 전달되어야 할 때만 label을 주세요.

// 옆의 텍스트가 이미 "삭제"라고 말하고 있습니다.
<Button startIcon={<Icon icon={<TrashIcon />} />}>삭제</Button>

// 글리프 외에 아무것도 없으므로 이름이 필요합니다.
<Icon icon={<TrashIcon />} label="삭제" />

글리프가 컨트롤 전체인 경우에는 IconButton을 쓰세요. 그쪽은 label이 필수입니다.