Components

Icon

Docs

Icon 사용 API입니다. 에셋·사이즈 목록은 Overview를 참고하세요.

API

size는 표시 px·에셋 선택 기준입니다. className에 size-* · w-* · h-* (md: 등 포함)가 있으면 표시는 className이 우선하고, size는 에셋(16|24)만 결정합니다.

import { Icon } from "@/shared/icons";

{/* size prop만 — 표시 18, 에셋 24 */}
<Icon name="close" size={18} weight="regular" />

{/* 반응형 — className이 표시 크기, size는 가장 큰 표시에 맞춰 에셋 선택 */}
<Icon
  name="close"
  size={18}
  weight="regular"
  className="size-4 md:size-[18px]"
/>

{/* 색 + 크기 */}
<Icon name="check" size={16} weight="bold" className="text-status-success" />

Props

Name	Type	Default	Description
`name`Required	`IconName`	—	아이콘 이름. sync된 ICON_NAMES 목록을 사용합니다.
`size`	`number`	`16`	기본 표시 크기(px) + 에셋 선택(≤16→16, >16→24). className에 크기 유틸이 있으면 표시는 className, size는 에셋만.
`weight`	`"regular" \| "bold" \| "filled" \| "unfilled"`	`"regular"`	선 굵기/채움. 이름·에셋 사이즈에 따라 가용 weight가 다릅니다.
`className`	`string`	—	색(text-) · 크기(size- / w-* / h-, md:size- 등). 크기 유틸이 있으면 인라인 width·height를 생략합니다.

Notes

원본은 clabi_ds/icons이며 npm run ds:sync로 shared/icons에 반영됩니다.
ICON_SIZES는 에셋 픽스처(16|24)입니다. 소비 앱은 size={18} 또는 className="size-4 md:size-[18px]"처럼 표시 크기를 자유롭게 지정합니다.
반응형 크기: className에 크기 유틸을 쓰고, size는 최대 표시 크기 기준으로 에셋을 고르세요(예: md에서 18이면 size={18} → 24 에셋).
제품 앱에 컴포넌트만 설치할 때는 필요한 아이콘 에셋을 함께 복사하세요.