SVG 아이콘을 생성하거나 React 컴포넌트로 래핑할 때 호출. 디자인 시스템용 아이콘 일관성이 필요할 때 참조.
디자인 시스템용 SVG 아이콘 생성 규칙. Stroke 기반 24x24 아이콘을 일관되게 만든다.
| 속성 | 값 |
|---|---|
| viewBox | 0 0 24 24 |
| 기본 크기 | 24x24px |
| stroke-width | 2 (기본), 1.5 (세밀한 아이콘) |
| stroke-linecap | round |
| stroke-linejoin | round |
| fill | none |
| stroke 색상 | currentColor |
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<!-- paths here -->
</svg>
<!-- Bad - 하드코딩된 색상 -->
<path stroke="#333333" d="M12 5v14" />
<!-- Bad - 불필요한 그룹/트랜스폼 -->
<g transform="translate(2, 2)">
<path d="M10 3v14" />
</g>
<!-- Good - currentColor, 직접 좌표 -->
<path d="M12 5v14" />
#000, rgb(), hsl()) - currentColor로 상속<g> 래핑 - 경로를 직접 배치transform 으로 위치 조정 - 좌표를 직접 계산style 어트리뷰트 - SVG 속성으로 지정12.45 OK, 12.456 X)id, class 어트리뷰트 - React에서 충돌 위험type IconProps = {
size?: number;
className?: string;
} & React.SVGAttributes<SVGElement>;
function ChevronRight({ size = 24, className, ...props }: IconProps) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className={className}
{...props}
>
<path d="m9 18 6-6-6-6" />
</svg>
);
}
function createIcon(name: string, paths: React.ReactNode) {
const Icon = ({ size = 24, className, ...props }: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className={className}
aria-hidden="true"
{...props}
>
{paths}
</svg>
);
Icon.displayName = name;
return Icon;
}
// 사용
const Check = createIcon("Check", <path d="M20 6 9 17l-5-5" />);
const X = createIcon("X", (
<>
<path d="M18 6 6 18" />
<path d="m6 6 12 12" />
</>
));
const Plus = createIcon("Plus", (
<>
<path d="M5 12h14" />
<path d="M12 5v14" />
</>
));
<!-- 장식용 아이콘 (텍스트와 함께 사용) -->
<ChevronRight aria-hidden="true" />
<span>다음</span>
<!-- 단독 사용 아이콘 (의미 전달 필요) -->
<button aria-label="닫기">
<X />
</button>
<!-- 상태 전달 아이콘 -->
<CheckCircle role="img" aria-label="완료" />
aria-hidden="true"aria-label 또는 아이콘에 role="img" + aria-labelaria-hidden="true" (대부분 텍스트와 함께 사용)src/
components/
icons/
index.ts # 모든 아이콘 re-export
types.ts # IconProps 타입
create-icon.tsx # 팩토리 함수 (선택)
ChevronRight.tsx # 개별 아이콘
Check.tsx
X.tsx
ChevronRight.tsx)ChevronRight)ChevronRight, ChevronDown, ArrowUpEye, EyeOff / Bell, BellOffchevron-right: m9 18 6-6-6-6
chevron-left: m15 18-6-6 6-6
chevron-down: m6 9 6 6 6-6
chevron-up: m6 15 6-6 6 6
arrow-right: M5 12h14 + m7-7 7 7-7
arrow-left: M19 12H5 + m7-7-7 7 7