3

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

How it looks with the code below

enter image description here

How I want it to look

enter image description here

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" 
    class="feather feather-download"
  >
    <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;
}
Snailedlt
  • 460
  • 6
  • 14
  • https://css-tricks.com/using-svg/#aa-the-problem-with-both-img-and-background-image – CBroe Jan 21 '22 at 10:59
  • Using a `` element instead would do the trick: you can also reference an external svg asset (similar to an img). See also [How to access style properties of externally insert svg file?](https://stackoverflow.com/questions/70811533/how-to-access-style-properties-of-externally-insert-svg-file/70816672#70816672) – herrstrietzel Jan 24 '22 at 23:25

1 Answers1

2

Approach #1

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

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

Working Example:

button {
  height: 48px;
  padding: 0 12px;
  font-size: 18px;
  line-height: 48px;
  font-weight: 900;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 63);
  border: none;
  border-radius: 9px;
  box-sizing: border-box;
}

button svg {
  margin-left: 4px;
  transform: translateY(4px);
}
<button type="button">
Eksporter

<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" 
    class="feather feather-download"
  >
    <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>

Approach #2

You can use CSS instead of SVG attributes.

Working Example:

button {
  height: 48px;
  padding: 0 12px;
  font-size: 18px;
  line-height: 48px;
  font-weight: 900;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 63);
  border: none;
  border-radius: 9px;
  box-sizing: border-box;
}

button svg {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  transform: translateY(4px);
  stroke-width: 2px; 
  stroke-linecap: round;
  stroke-linejoin: round;
}

button.red svg {
  stroke: rgb(255, 0, 0);
}

button.yellow svg {
  stroke: rgb(255, 255, 0);
}

button.green svg {
  stroke: rgb(0, 255, 63);
}
<button type="button" class="red">
Eksporter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <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>

<button type="button" class="yellow">
Eksporter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <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>

<button type="button" class="green">
Eksporter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <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>
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • Is there any way to do this without an inline svg? I'm using the same svg several places, so I don't want to use inline if possible. – Snailedlt Jan 21 '22 at 11:05
  • 1
    @Hackiss Yes, you can either change the `stroke` directly in your SVG file – maiakd Jan 21 '22 at 11:09
  • @maiakd True, but then I'd have to make another SVG if I want to have it in a different color somewhere else. Is there any way to set the color from the HTML or CSS file without making a new SVG? – Snailedlt Jan 21 '22 at 11:13
  • 1
    You can use an include (partial) to put your svg in a separate file, so you don't have to put the svg code in every place where you want to show it, but inline SVG is the best way to change the color with css – Gert B. Jan 21 '22 at 11:20
  • Re: _"Is there any way to set the color from the HTML or CSS file without making a new SVG?"_ Yes. You can replace the SVG attributes with CSS. See **Approach #2** above. – Rounin Jan 21 '22 at 11:36