How to modify svg icon colors with tailwind?

by mallory_cormier , in category: HTML & CSS , 16 days ago

How to modify svg icon colors with tailwind?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by elise_daugherty , 15 days ago

@mallory_cormier 

To modify SVG icon colors with Tailwind CSS, you can use the fill-current class along with Tailwind utility classes for text colors. Here's an example of how you can do this:

  1. Add the fill-current class to the SVG element to ensure that the fill color of the SVG icon is current text color:
1
2
3
<svg class="fill-current text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2 16h-4v-3h4v3zm0-5h-4V7h4v6z"/>
</svg>


In the above example, the fill-current class sets the fill color of the SVG icon to be the current text color, and the text-red-500 class sets the fill color to red-500.

  1. You can use any Tailwind utility class for text colors to change the fill color of the SVG icon. For example, you can use text-blue-500 to change the fill color to blue-500.
1
2
3
<svg class="fill-current text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2 16h-4v-3h4v3zm0-5h-4V7h4v6z"/>
</svg>


By using Tailwind CSS utility classes along with the fill-current class, you can easily modify the fill color of SVG icons in your project.