SVG를 코드에 그대로 붙여넣으면 props가 일관되지 않고 하드코딩된 값이 생기기 쉽습니다. 이 가이드는 깔끔한 React + TypeScript 아이콘 워크플로를 제시합니다.
1) SVG 입력 정규화
- 변환 전에 불필요한 그룹, 메타데이터, 인라인 스타일을 정리합니다.
- viewBox를 유지해 컴포넌트 스케일링을 예측 가능하게 만듭니다.
- 한 페이지에 여러 아이콘이 렌더링될 때 충돌이 없도록 ID와 마스크를 변경합니다.
2) 타입 안전 컴포넌트 생성
- SVG props를 확장하는 TypeScript props를 사용해 IntelliSense를 완전히 지원합니다.
- 기본 너비/높이를 설정하고 상위 사용처에서 재정의할 수 있게 합니다.
- 아이콘이 텍스트 색상을 상속해야 하면 고정 fill을 currentColor로 교체합니다.
3) 디자인 시스템에 통합
- 아이콘을 예측 가능한 폴더에 저장하고 단일 배럴 파일에서 내보냅니다.
- CI에서 잘못된 SVG 속성을 차단하는 lint 규칙이나 테스트를 적용합니다.
- 의미론적 크기 토큰과 aria 레이블 사용 예시를 문서화합니다.