How to fill svg in tailwind?
How to fill svg in tailwind?
1 answer
by
daisha ,
7 months ago
@raven_corwin
To fill an SVG with a color using Tailwind CSS, you can use the text- classes to set the fill color of the SVG. Here's an example of how you can fill an SVG with a color using Tailwind CSS:
1 2 3 4 5 |
<svg class="w-6 h-6 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 2zm0 18c-4.41 0-8-3.59-8-8 0-3.47 2.72-7.78 7.34-7.98.15.01.31.03.47.05.45.04.89.17 1.32.37.5.24.97.56 1.39.94.42.38.78.8 1.08 1.27.3.47.52.99.64 1.52.17.65.26 1.32.26 2.08 0 .71-.09 1.38-.26 2H12zm0-16c-4.55 0-8 3.37-8 8 0 4.41 3.59 8 8 8 2.12 0 4.06-.83 5.5-2.19l-9.69-9.69C10.84 3.83 9.12 4 7.25 5.41 5.55 6.67 4.37 8.34 4 10h4c.45-1.43 2-2.27 3.4-1.7.66.27 1.22.82 1.63 1.53.41.71.61 1.57.61 2.47 0 .45-.07.88-.21 1.3-.14.41-.34.79-.6 1.15-.26.36-.58.69-.95.97-.38.3-.79.54-1.26.72-.48.19-.99.27-1.58.27C8.69 19 4 16.2 4 12 4 7.59 7.59 4 12 4z"
/>
</svg>
|
In this example, the text-blue-500 class is used to fill the SVG with a blue color. You can replace blue-500 with any other color available in Tailwind CSS (e.g., text-red-500, text-green-500, etc.) to fill the SVG with a different color. Additionally, the fill="currentColor" attribute is used to ensure that the SVG is filled with the color specified by the text- class.