TailwindCSS를 사용하여 SVG 아이콘 색상 변경하는 법

 

SVG는 웹 프로젝트에 확장 가능한 아이콘과 그래픽을 추가하는 훌륭한 방법이지만, 색상을 사용자 정의하는 것은 다소 까다로울 수 있습니다. 이 글에서는 TailwindCSS를 사용하여 SVG 요소에 채우기 색상을 간단하게 적용하는 방법을 알아보겠습니다.

왜 SVG 색상에 TailwindCSS를 사용할까요?

TailwindCSS는 사전 정의된 클래스를 사용하여 빠르게 스타일을 적용할 수 있는 유틸리티 기반 CSS 프레임워크입니다. 프로젝트 전반에 걸쳐 색상 일관성을 관리하는 데 매우 유용합니다. Tailwind의 채우기 유틸리티를 사용하면 SVG 그래픽의 색상을 사용자 정의 CSS 없이도 쉽게 제어할 수 있습니다.

TailwindCSS를 사용하여 SVG에 채우기 색상 적용하기

기본적으로 'fill-current' 클래스를 적용하면 텍스트 색상 값이 fill의 값으로 할당이 되는 원리를 활용하면 됨

 

SVG의 채우기 색상을 설정하는 두 가지 주요 방법이 있습니다.

1. Tailwind의 텍스트 색상 클래스를 사용한 fill-current

fill-current 유틸리티 클래스는 SVG가 현재 텍스트 색상을 상속하도록 하여 유연한 선택을 제공합니다. 사용 방법은 다음과 같습니다:

<svg  
width="21"  
height="20"  
viewBox="0 0 21 20"  
fill="none"  
xmlns="[http://www.w3.org/2000/svg"](http://www.w3.org/2000/svg")  
class="fill-current text-blue-500"

이 예시에서는:
• fill-current는 SVG에 현재 텍스트 색상을 채우기 색상으로 사용하도록 지시합니다.
• text-blue-500은 텍스트(및 채우기) 색상을 파란색으로 설정하며, text-red-500 또는 text-green-400과 같이 다른 Tailwind 색상으로 교체할 수 있습니다.

이 방법은 SVG에 색상을 적용할 때 일관성을 제공하며, 텍스트 색상을 기반으로 하기 때문에 기본적으로 Tailwind의 모든 색상 유틸리티를 사용할 수 있습니다.

2. Tailwind를 확장하여 fill-* 색상 클래스를 사용하는 방법 (선택 사항)

SVG에 fill-current를 사용하지 않고 채우기 색상을 직접 적용하고 싶다면, Tailwind를 확장하여 fill-blue-500, fill-red-400 등의 채우기 색상 클래스를 생성할 수 있습니다.

이를 위해 tailwind.config.js 파일을 열고 다음 구성을 추가하세요:

module.exports = {  
theme: {  
extend: {  
fill: theme => theme('colors'),  
},  
},  
};

이 설정은 Tailwind가 fill-blue-500 및 fill-red-400과 같은 클래스를 각 색상에 대해 자동으로 생성하도록 합니다. 그 후 SVG에 직접 적용할 수 있습니다:

<svg  
width="21"  
height="20"  
viewBox="0 0 21 20"  
xmlns="[http://www.w3.org/2000/svg"](http://www.w3.org/2000/svg")  
class="fill-blue-500"

이 구성을 추가하면 Tailwind가 테마에 있는 각 색상에 대해 채우기 색상 클래스를 자동으로 생성합니다. 여러 SVG를 사용하고 색상을 더 정밀하게 제어하려는 경우 매우 유용합니다.

어느 방법을 선택해야 할까요?

•    fill-current를 사용하여 간단한 솔루션을 원하고 현재 텍스트 색상을 상속하는 것이 편리한 경우에 적합합니다. Tailwind 설정을 수정할 필요가 없으므로 더 간편한 접근 방식입니다.
•    fill-* 색상 클래스를 사용하면 텍스트 색상과 독립적으로 SVG 색상을 정확하게 제어할 수 있습니다. Tailwind 구성을 확장해야 하지만, 복잡한 SVG가 필요한 프로젝트에는 매우 편리합니다.

마무리

TailwindCSS의 유틸리티 기반 접근 방식은 SVG의 스타일링을 단순화하여 색상을 적용하는 유연한 옵션을 제공합니다. fill-current 또는 fill-* 색상 클래스 중 어떤 것을 선택하더라도, 코드 일관성을 유지하며 SVG 채우기 색상을 효율적으로 관리할 수 있습니다.