Change stroke color of svg icons on different background

Question

I Want to change my svg icon into different colors depending on their background I am using this star icon that has this code:

when it has white background it looks like this and have black stoke and that is fine as below image:

And when I add the same star svg icon to the button component then it should have white stroke and not black stroke, have tried with

 svg { fill: currentColor) // then it's invisible on white background, because of its whiteness.

like below, How can I achieve the white star without black stoke ?

instead of having the star with black stokes

After following the suggestion where I was sending this two props: scgStroke and svgFill, now in my white background I am getting star with black fill and in button as below:

I want the outside stroke to show not the white fill (fill = "white") something like below image:

Nikola Pavicevic · Answer

You can create component and pass props with colors:

Vue.component('icon', {
  template: `
  `,
  props: {
    svgStroke: {default: 'black'},
    strokeWidth: {default: 2}
  }
})

new Vue({
  el: '#demo',
})

.btn {
  background-color: #2f76fd;
  color: white;
  display: flex;
  align-items: center;
  border: none;
  padding: .5em 1em;
}
.btn-text {
  margin-right: .5em;
}

Change stroke color of svg icons on different background

1 Answers