아이콘

아이콘을 얼마나 크게 그리고 스크린리더에 어떻게 읽히게 할지 정한다.

크기

값이 14 · 16 · 20 · 24px 로 등간격이 아니다. 값이 불규칙해서 숫자가 아니라 역할 이름을 쓴다(디자인 토큰). xl 은 쓰이지 않아서 만들지 않았다.

어느 크기를 고르나

아이콘은 나란히 놓인 글자보다 한 단계 크다. 같은 크기로 맞추면 아이콘이 글자보다 작아 보인다. 글자는 획이 촘촘하고 아이콘은 비어 있기 때문이다.

현재 쓰이는 곳 전부

보이는 크기와 누를 수 있는 크기는 다르다

읽히는 아이콘과 읽히지 않는 아이콘

Icon 은 title 이 있는지로 갈린다. 이것이 유일한 스위치다.

{/* 장식용 — 옆의 "삭제" 가 이미 뜻을 전한다 */}
<Button icon={<DelIcon />}>삭제</Button>

{/* 아이콘만 있는 버튼 — 접근 이름은 버튼이 갖는다 */}
<IconButton aria-label="삭제">
  <DelIcon />
</IconButton>

아이콘 세트

아이콘은 lucide-react 다. 24px 격자에 stroke 2 인 line 아이콘이고, 크기에 비례해 선이 가늘어진다. 컴포넌트가 쓰는 일곱 개(지우기 · 검색 · 비밀번호 보기/숨기기 · 닫기 · 달력 · 주의)는 @nui-kit/react/icon 에서 가져온다. Select 의 화살표와 지우기, Datepicker 의 이전/다음, Accordion 의 화살표도 같은 세트다.

직접 넣을 아이콘은 lucide-react 에서 바로 가져온다. size 에 14 · 16 · 20 · 24 를 주면 위 표와 같은 자리에 놓인다. 라이브러리가 쓰는 세트와 같아 선 굵기가 섞이지 않는다.

import { Trash2 } from "lucide-react";

<Button icon={<Trash2 size={20} />}>삭제</Button>

직접 만든 SVG 를 쓸 때는 Icon 으로 감싸면 크기·색·접근성 처리가 함께 따라온다.

토큰