How to use color to fill an SVG icon in tailwind css?

Question

I am trying to figure out how to use a fill color in svg icons using tailwinds css.

If i use fill="#hex color value" in the path, I can apply a color.

I am trying to follow the tailwinds docs and use it's colors.

I have tried as many variations on the below as I can find in various blog posts, but can't find a version that works.

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="fill-blue-500"><path fill="none" d="M0 0h24v24H0z" />
        <path 
            d="M18 7h3a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h15v4zM4 9v10h16V9H4zm0-4v2h12V5H4zm11 8h3v2h-3v-2z"
            fill="fill-slate-200"
         // note: fill="#2d3047" works to change the icon color
    />
 </svg>

When I try:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="fill-current"><path fill="none" d="M0 0h24v24H0z" />
    <path 
        d="M18 7h3a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h15v4zM4 9v10h16V9H4zm0-4v2h12V5H4zm11 8h3v2h-3v-2z"
        
    />
</svg>

And then try using it in a div:

<div className="mx-auto max-w-2xl md:text-center">
                        <p className="text-center text-blue-700">
                          <Image src={company.logo} alt={company.name} unoptimized className="text-center mx-auto text-blue-700" />
                        </p>

The text svg renders black. I am trying to force it to use blue. I have tried adding blue at every container level - but none of them feed through to the svg image container

score 1 · Answer 1 · answered Jan 07 '23 at 05:39

You're trying to use a Tailwind class as the fill value.

fill="fill-slate-200"

Tailwind classes do not work outside of the class context. You have a class that is working in the fill-blue-500 on the SVG element itself so you can either carry on in that way or you can change it to fill-current and then it will adopt whatever the parent element's text color is which is helpful for things like changing color on hover.

<div class="m-3 flex space-x-2 text-green-600 hover:text-red-600 cursor-default">
  <svg viewBox="0 0 24 24" width="24" height="24" class="fill-current">
    <path d="M18 7h3a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h15v4zM4 9v10h16V9H4zm0-4v2h12V5H4zm11 8h3v2h-3v-2z" />
  </svg>
  <span>Wallet</span>
</div>

Here is this example on Tailwind Play https://play.tailwindcss.com/AINTKQdbZg

is it possible that this doesnt work if the svg is in an image tag? I have updated the post to show what's not working. I cant find a way to get your approach to work — Mel, Jan 07 '23 at 06:29
This method only works with inline SVG not when used in an img tag. CSS has no external control over that SVG file when it's used as an image, only CSS included in the SVG file itself can affect the image when used in that context. — JHeth, Jan 08 '23 at 09:39

krishnaacharyaa · Answer 2 · 2023-01-07T16:45:07.063

0

You are using your color in your path, that is one level deep from your parent div. So color is getting overridden by your path component.

 <svg class="fill-blue-500">
      <path ... fill="none" />                 This fill is overriding 
      <path ... fill="fill-slate-200"/>        your parent fill-blue-500
 </svg>

So you can't access its fill from parent class

How to overcome ?

Try using class of fill-blue-500 inside your path component

<svg>
  <path ... class="fill-blue-500" d="M0 0h24v24H0z" />  use fill-blue-500 here
  <path ... class="fill-yellow-500" />                 now you can use tailwind classes
</svg>

End Code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100" class="m-10">
  <path class="fill-blue-500" d="M0 0h24v24H0z" />
  <path d="M18 7h3a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h15v4zM4 9v10h16V9H4zm0-4v2h12V5H4zm11 8h3v2h-3v-2z" class="fill-yellow-500" />
</svg>

Output:

Also refer: How to modify svg icon colors with Tailwind

edited Jan 07 '23 at 16:45

answered Jan 07 '23 at 10:44

krishnaacharyaa

14,953
4
49
88

If I add class="fill-yellow-500 to the path , it renders a the image as black (no color fill). If I add the hex value of that colour inside an attribute named 'fill', I can produce a colored svg. I don't know why it doesn't work as is shown in the docs, but I'm giving up now. I'll use hex values and fill instead of tailwinds css color values – Mel Jan 07 '23 at 20:29
The output in my post, isn't that desirable? – krishnaacharyaa Jan 08 '23 at 01:12
no - im trying how to figure out how to apply color in the context of the template that i've extracted – Mel Jan 08 '23 at 05:12

How to use color to fill an SVG icon in tailwind css?

2 Answers2

How to overcome ?

End Code:

Output: