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

YDS 아이콘 라이브러리 재구축 배경

• 기존 아이콘 관리는 트리 쉐이킹 불가, 색상 제어 미흡, 컴포넌트 라이브러리 종속성 등의 문제점을 가짐.
• 개별 SVG 컴포넌트 관리, 최적화, 독립적인 라이브러리 구축을 목표로 개선 방향 설정. 아이콘 라이브러리 구축 상세
• Figma SVG 파일을 svgo로 최적화하고 (Monochrome은 currentColor 적용, Multicolor는 원본 색상 유지), svgr로 React 컴포넌트로 자동 변환.
• AccessibleIcon 래퍼 컴포넌트를 통해 접근성을 확보하고, 아이콘 타입 식별 유틸리티 함수 제공. 디자인 시스템 통합 및 운영
• Wrapper 컴포넌트를 통해 디자인 시스템과 통합, 스타일 제어 및 타입 안정성 확보.
• 아이콘 변경 내역 자동화된 PR description 생성으로 관리 효율화.
• 향후 Figma 플러그인을 통한 협업 방식 개선 계획.