[디자인 시스템 어떻게 만들었어요?(1)] 아이콘 라이브러리 만들기

문제 상황

• Figma export SVG를 컴포넌트 라이브러리에서 name prop으로 매핑하는 구조
• 런타임 동적 접근으로 인한 트리 쉐이킹 불가
• Monochrome과 Multicolor의 색상 요구사항 미반영, 리소스 변경 시 라이브러리 버전 상승 필요

해결 방법

• 아이콘을 개별 SVG 컴포넌트로 분리하고 아이콘 전용 라이브러리 구축
• SVG 최적화와 SVGR 커스텀 템플릿으로 React 컴포넌트 자동 생성
• AccessibleIcon, create/isYds2Icon 유틸로 접근성과 타입 식별 지원

성능/운영 포인트

• Monochrome은 currentColor 적용, Multicolor은 원본 색상 유지
• Wrapper 컴포넌트로 스타일 제어를 일원화하고 디자인 시스템 토큰 연동
• PR diff 기반 변경 내역 관리와 Figma 플러그인 자동화로 운영 효율 개선