For some reason setting color: #ffffff in CSS doesn't apply to my SVG.

How it looks with the code below

How I want it to look

Interestingly, it works if i replace currentColor with #ffffff in the SVG itself, but setting it in my CSS doesn't do anything. I also tried setting it inline in the HTML (style="color:#ffffff"), and setting stroke: #ffffff, but that didn't do anything either.

I'm out of ideas, so if anyone knows how to do this, and why setting it in css doesn't work, let me know.

Here's my code:

download.svg:

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="24" 
    height="24" 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="currentColor" 
    stroke-width="2" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    
  >
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

My img:

<button type='button' class='btn btn-primary' on:click={ExportXlsx}>
  Last ned
  <img class='test' alt='download' src='/images/download.svg' />
</button>

my css:

.test{
  color: #ffffff !important;
}

CodePudding user response：

It will only work if your SVG is "inline" in your HTML file. Imported images cannot be manipulated.

CodePudding user response：

You'll need to specify a color for the stroke property:

stroke="rgb(255, 255, 255)"

Working Example:

button {
  color: rgb(255, 255, 255);
  background-color: rgb(0,0,0);
}

<button type="button">
Last ned

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="24" 
    height="24" 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="rgb(255, 255, 255)" 
    stroke-width="2" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    
  >
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>