How to fill svg in tailwind?

by raven_corwin , in category: HTML & CSS , a year ago

How to fill svg in tailwind?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by daisha , a year 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.

Related Threads:

How to fill an image inside my svg circles in d3.js?
How to format an svg logo for tailwind?
How to modify svg icon colors with tailwind?
How to modify svg icon colors with tailwind?
How to make text visible over svg image in tailwind css?
How to fill empty column from another table in oracle?