DEV Community

How To Change SVG's Color in React.

Nasser Abachi on July 05, 2020

A few days ago I saw a question in StackOverflow about how to change an SVG image's color. So I want to share a small tip to do it without the need...
Collapse
 
mahesht10 profile image
Mahesh Kumaran

Great stuff ! But what do we do if we have multiple colors in the svg , and would to change them all based on the themes chosen (primary /secondary colors) ? I think this can be used only with Single color SVG ?

Collapse
 
kritikjain9 profile image
Kritik Jain

Exactly. I want to change the colors of my SVG to red, green and grey on the basis of some conditions.

How can I achieve that?

Collapse
 
abdeldjalilhachimi profile image
Abdeldjalil Hachimi

Thanks a lot for a meaningful article.

Collapse
 
fly profile image
joon

Wow if only I had known this sooner... Thanks a billion

Collapse
 
_ajay_gupta profile image
Ajay Gupta

Great!!!

Collapse
 
shock451 profile image
Abdullahi Ayobami Oladosu

Dude. Amazing stuff. Thanks

Collapse
 
banzy profile image
Vicent

It works with the 'stroke-width' too. Thank you.

Collapse
 
alirezatav profile image
alireza tavasoli

Great!
can you explain about first line import { ReactComponent as Logo } ?

Collapse
 
omogbai profile image
Omogbai Atakpu

Great article, thank you!

Collapse
 
remip profile image
RemiPrevost

❤️

Collapse
 
nassimmiled profile image
nassimmiled

Thanks bro
انقذت حياتي ههه

Collapse
 
chaykov profile image
Chaykov

Interesting. It is what I was looking for about yesterday for my next mini project. Good explanation!

/Chaykov

Collapse
 
sidharthd profile image
Sidharth D

Clean and simple solution. Thanks a ton!