Reputation: 3223
I'm trying to dynamically change an imported SVG color based on a state.
I created my SVG component this way:
import { ReactComponent as LeftLed } from './left_led.svg';
My component is used this way:
<LeftLed className="device_preview_led">
<path className="path" />
</ LeftLed>
And here is my issue. I would like to apply a style={{fill:this.state.b_color}}
property to one of my component, but it doesn't apply any visible effect on my LeftLed
component.
It would work on the <path>
but this one is dynamically generated ( so my own <path>
disappears ) and I have no idea how to 'fill' it's color. Using a <img>
instead of a component doesn't allow filling.
How can I change my SVG color dynamically?
Thanks :)
Upvotes: 0
Views: 50
Reputation: 176
in your case:
<LeftLed fill={this.state.b_color} className="device_preview_led">
and make sure your .svg file has fill
property as:
<svg fill="current" ... </svg>
(note that fill
is applied directly to <svg>
tag and not as a style or class)
Upvotes: 1