React

kubai-icons-react는 각 아이콘을 React 컴포넌트로 제공합니다. React 18 이상이 필요합니다.

설치

bash

npm install kubai-icons-react

사용법

아이콘을 이름으로 가져와 컴포넌트로 렌더링합니다.

tsx

import { Calendar, Lock } from "kubai-icons-react";

export function Example() {
  return (
    <>
      <Calendar />
      <Lock size={32} color="#22C55E" variant="soft" title="Locked" />
    </>
  );
}

Prop 목록

Prop	기본값	설명
`size`	24	너비와 높이(픽셀)입니다.
`color`	currentColor	모든 그라디언트, 윤곽선, 표시가 파생되는 강조 색상입니다. 사용자 지정을 참고하세요.
`variant`	상속, 없으면 "color"	`"soft"`는 더 밝은 채우기와 더 어두운 윤곽선을 사용하고, 흰색 표시는 어두운 색조로 그립니다.
`badgeColor`	어두운 회색	배지 원의 색상입니다. 임의의 CSS 색상이거나, 배지마다 어울리는 색을 고르는 `"semantic"`입니다. 추가는 초록, 삭제는 빨강, 경고는 주황입니다.
`trigger`	"hover"	`"hover"`는 아이콘에 마우스를 올리거나 키보드 포커스가 이동하면 모션을 재생합니다. `"parent"`는 `data-kubai-trigger`가 있는 가장 가까운 상위 요소에서 같은 방식으로 재생하며, 없으면 바로 위의 부모 요소를 기준으로 합니다. `"none"`은 리스너를 추가하지 않으므로 `hover` prop으로만 모션이 재생됩니다.
`hover`	없음	`true`는 모션을 재생하고 `false`는 되돌립니다. `trigger="none"`과 함께 사용하면 모션을 완전히 제어할 수 있습니다.
`active`, `defaultActive`, `onActiveChange`	없음	클릭하거나 탭할 때 두 상태를 오가는 토글 아이콘의 켜짐/꺼짐 상태입니다. `Bookmark`가 한 예입니다.
`title`	없음	접근 가능한 이름입니다. 없으면 아이콘은 `aria-hidden`으로 처리됩니다. 접근성을 참고하세요.

className, style, 이벤트 핸들러, ref 같은 다른 SVG prop은 <svg>로 그대로 전달됩니다.

부모에서 트리거

버튼 전체에 마우스를 올리거나 키보드 포커스가 이동할 때 모션을 재생하려면 버튼에 data-kubai-trigger를, 아이콘에 trigger="parent"를 추가하세요.

tsx

<button data-kubai-trigger className="btn">
  <Trash size={18} trigger="parent" />
  Delete
</button>

이름으로 아이콘 사용

API에서 받은 값처럼 아이콘 이름을 런타임에만 알 수 있다면 DynamicIcon을 사용하세요. 각 아이콘은 여전히 별도의 청크이므로 번들에 전체 세트가 포함되지 않습니다.

tsx

import { DynamicIcon } from "kubai-icons-react/dynamic";

export function ItemIcon({ name }: { name: string }) {
  return <DynamicIcon name={name} size={20} />;
}

서버 렌더링

아이콘은 별도 설정 없이 Next.js 서버 컴포넌트와 클라이언트 컴포넌트에서 동작합니다. 마크업은 서버에서 렌더링되고 모션은 하이드레이션 시점에 추가됩니다. DynamicIcon은 예외로, 서버에서는 빈 플레이스홀더를 렌더링하고 브라우저에서 아이콘을 불러옵니다.

개별 파일 import

개발 서버에서 패키지 인덱스를 불러오지 않으려면 아이콘을 해당 파일에서 직접 가져오세요. 성능을 참고하세요.

tsx

import Folder from "kubai-icons-react/icons/folder";