CODEWITHSUNDEEP
reactjssvgfillreact-component
Virthuss
Virthuss

Reputation: 3223

Change imported SVG Component color with state

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

Answers (1)

Tymoxx
Tymoxx

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

Related Questions