[트러블슈팅] 공통 아이콘 컴포넌트에서 SVG 색상 제어 문제 해결기

팀 노션에 작성한 글을 가져와보았다.

 

1. 개요

공통 아이콘 컴포넌트 <UrIcon /> 에서 SVG 아이콘에 color prop으로 동적으로 색상을 적용할 수 있도록 만들어져 있으나 실적용이 되지 않음

Figma에서 export된 아이콘들은 기본적으로 색상이 하드코딩(fill="#xxxxxx")되어 있음을 확인

또한 기존 해당 컴포넌트로 import된 Icon들이 상당수임을 확인

 

2. 시도 1: SVG 직접 수정

fill="currentColor"로 변경 → 적용 안 됨

이유: fill은 CSS의 color를 따라가므로 style={{ color }}로 적용해야 함

 

3. 시도2: ?react 로 import

vite-plugin-svgr 설치 후 forceReact prop으로 분기 처리

.svg?react로 import 시, SVG가 React 컴포넌트 형태로 변환되므로 style={{ color }}를 통한 색상 제어 가능

 

4. 해결

아이콘 색상 변경이 필요한 경우, forceReact를 사용하여 ?react 방식으로 불러오고, 해당 SVG 파일 내부 fill 속성을 currentColor로 수동 수정해 사용하는 방식으로 해결

기존 SVG는 그대로 사용하며, 색상 변경이 필요한 아이콘만 선별적으로 대응함으로써 전체 리팩토링 비용을 최소화함

결과적으로 <UrIcon /> 하나로 .svg, react-icons, 색상 동적 제어까지 모두 커버 가능하게 구조 개선 완료

 

 

결론

 

• SVG는 이미지가 아니라 "XML 기반 벡터 그래픽"이기 때문에 CSS 스타일이 적용되려면 SVG 내부의 fill, stroke 속성이 currentColor를 따라야 한다
• Figma에서 export된 SVG는 대부분 색상이 하드코딩되어 있어, 코드에서 동적으로 제어하려면 수작업 수정이 필요
• Vite 환경에서 SVG를 React 컴포넌트로 불러오려면 vite-plugin-svgr 설정이 필요하며, dynamic import 시 Vite 제한도 고려해야 함
• 범용 아이콘 컴포넌트를 만들 때는 예외 케이스를 위한 옵션(이 경우, forceReact)을 마련해두는 것이 좋다
• 이 경우, 동적으로 색상을 제어하는 방법이 없을까 하여 적용하였지만, 기존 Figma에서 Icon을 import하는 구조로 유지한다면, 색상 별 icon을 import하는 방법도 나쁘지 않은 방법이라고 생각된다