SVG

There's a few cool ways to modify SVG elements that can make it easier to create modification on basic elements.


Stroke

stroke-current

Docs Try it

There's a special class that you can use with SVGs that lets you control the color of the sroke called stroke-current.

When you apply it to an SVG element, it sets the color of that item to whatever the current color is.

That means that if you apply a text-color to the item using the text-color utilities., you can easily modify the color of the SVG.

The SVG really has to be specially prepared for this so that i's composed mostly of stroke items. You can also use some of the Tailwind classes to control the elements.


Fill

fill-current

Docs Try it

Like with stroke, fill-current lets you quickly modify an existing svg's image color by using the current color. You can still use the text-color utilities, although it seems sort of weird to switch fills and strokes with text clases.

It's better if the SVG is specially prepared for this purpose as I've done here. So I closed up the outline of the cabin at the top and made the holes compound objects in Illustrator.

remember that the responsive classes work here as well, so changing the color on hover is easy.