SVG 아이콘을 직접 수정해야 하는 이유

디자인 시스템을 만들다 보면 아이콘의 색상을 상황에 맞게 바꿔야 할 때가 많습니다. 트위터 아이콘 역시 기본으로 제공되는 SVG는 fill="currentColor"로 되어 있어, CSS의 글자색을 따라갑니다.

하지만 배경색과 어울리지 않거나 테마와 맞지 않을 경우 직접 SVG를 수정해주는 것이 더 확실한 방법입니다.

currentColor 대신 white로 변경하기

트위터 아이콘 SVG 파일을 열어보면 <path> 태그에 보통 fill="currentColor" 속성이 들어가 있습니다.

이 부분을 fill="white"로 바꿔주면, 어떤 배경색 위에서도 하얀색 아이콘이 표시됩니다. 예시는 다음과 같습니다.

변경 전

<svg ... fill="currentColor" ...>

변경 후

<svg ... fill="white" ...>

이렇게 바꿔주면 CSS에서 텍스트 색을 조절하지 않아도 아이콘은 항상 흰색으로 유지됩니다.