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

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" ><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" ><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

CodePudding user response：

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 >
  <svg viewBox="0 0 24 24" width="24" height="24" >
    <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

Also refer: How to modify svg icon colors with Tailwind