Pantoia Design
Foundations

Icon

사용 예시

직접 쓰기

svg를 그대로 적어요. 획과 색은 아래 속성으로 두고 크기는 쓰는 곳에서 적어요.

직접 그린 것
Checkbox의 체크
tsx
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"  strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"  className="size-4" aria-hidden="true">  <path d="M3 12c3-6 6-6 9 0s6 6 9 0" /></svg>

세트 설치

아이콘이 많이 필요하면 세트를 설치해요. lucide-react는 컴포넌트 안의 아이콘과 획 규칙이 같아서 함께 써도 굵기가 맞아요.

Copy
Trash2
Settings2
Download
lucide.dev에서 찾기
sh
npm install lucide-react
tsx
import { Copy, Trash2 } from 'lucide-react'<Copy className="size-4" /><Trash2 className="size-4" />

크기

색

아이콘에 색을 따로 주지 않아요. 아이콘 색은 글자색과 같아요.

자동으로 저장돼요형식이 올바르지 않아요
tsx
<span className="inline-flex items-center gap-tight text-label">  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"    strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"    className="size-4" aria-hidden="true">    <circle cx="12" cy="12" r="10" />    <path d="M12 16v-4" />    <path d="M12 8h.01" />  </svg>  자동으로 저장돼요</span><span className="text-fg-danger inline-flex items-center gap-tight text-label">  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"    strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"    className="size-4" aria-hidden="true">    <circle cx="12" cy="12" r="10" />    <line x1="12" x2="12" y1="8" y2="12" />    <line x1="12" x2="12.01" y1="16" y2="16" />  </svg>  형식이 올바르지 않아요</span>

접근성

글자 없는 버튼은 aria-label로 이름을 적어요. 아이콘은 aria-hidden이라 스크린 리더가 읽지 않아요.

tsx
<Button color="neutral" emphasis="ghost" shape="square" aria-label="검색">  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"    strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"    aria-hidden="true">    <path d="m21 21-4.34-4.34" />    <circle cx="11" cy="11" r="8" />  </svg></Button><Button color="neutral" emphasis="ghost" shape="square" aria-label="닫기">  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"    strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"    aria-hidden="true">    <path d="M18 6 6 18" />    <path d="m6 6 12 12" />  </svg></Button>

일관성