SVG를 그대로 코드에 붙여 넣으면 props가 제각각이고 하드코딩 값이 남기 쉽습니다. 이 가이드는 더 정돈된 React + TypeScript 아이콘 워크플로를 제공합니다.
1) SVG 입력 정규화
- 변환 전에 불필요한 그룹, 메타데이터, 인라인 스타일을 정리합니다.
- 컴포넌트의 크기 동작이 예측 가능하도록 viewBox를 보존합니다.
- 한 화면에 여러 아이콘이 렌더링될 때 충돌을 피하려고 ID와 mask 이름을 정리합니다.
2) 타입 안전 컴포넌트 생성
- 완전한 IntelliSense를 위해 SVG props를 확장하는 TypeScript props를 사용합니다.
- 기본 width/height를 제공하되 부모에서 쉽게 override할 수 있게 둡니다.
- 아이콘이 텍스트 색을 따라야 하면 고정 fill 대신 currentColor를 사용합니다.
3) 디자인 시스템에 통합
- 아이콘을 예측 가능한 폴더에 두고 하나의 barrel 파일에서 export합니다.
- CI에서 잘못된 SVG 속성이 들어오지 않도록 lint 규칙이나 테스트를 둡니다.
- aria-label과 의미 있는 크기 토큰 사용 예시를 문서화합니다.