How to modify svg icon colors with tailwind?

@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.