How to modify svg icon colors with tailwind?

Member

by daisha , in category: HTML & CSS , 17 days ago

How to modify svg icon colors with tailwind?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by darrion.kuhn , 16 days ago

@daisha 

To modify SVG icon colors with Tailwind, you can use the text- utility classes provided by Tailwind. Here is an example of how to modify an SVG icon color with Tailwind:

  1. Add the SVG icon to your HTML file:
1
2
3
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>


  1. Apply a Tailwind utility class to change the color of the SVG icon:
1
2
3
<svg class="text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>


In this example, the text-red-500 class is used to change the SVG icon color to red. You can replace red-500 with any of Tailwind's color utility class names to change the icon color to a different color.