CODEWITHSUNDEEP
reactjsgoogle-chromeuser-interfacesvgfrontend
Gabriel
Gabriel

Reputation: 97

Why is React making my SVG shape color look weird?

I'm using some blob SVG shapes for a Login screen im making in react and i noticed the color was wrong, i directly export them from Figma, place them in a folder and then i just import them in react. i thought it was due to how chrome renders SVG files but when i opened it one a Chrome tab it looked as it should.

The left side is how React is showing it and the Right is how chrome shows it The left side is how React is showing it and the Right is how chrome shows it

enter image description here

Upvotes: 0

Views: 624

Answers (1)

Afx Crush
Afx Crush

Reputation: 243

It may be because of the svg style classes. When you export svg files, they get a default classname "st0", "st1", and so... If you have multiple svg files as components in the same page, you may change every classname in the svg file

They look something like this when you open the svg in your code editor

<style type="text/css">
    .st0{fill:#121224;}
    .st1{fill:#FFFFFF;}
    .st2{fill:#F89CFF;}
    .st3{fill:#1E5474;}
    .st4{fill:none;}
    .st5{fill:none;stroke:#1E5474;stroke-miterlimit:10;}
    .st6{fill:none;stroke:#F89CFF;stroke-miterlimit:10;}
    .st7{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-miterlimit:10;}
    .st8{stroke:#1E5474;stroke-width:0.6087;stroke-miterlimit:10;}
</style>

To change every class you can select the name of one of them and press ctrl+shift+L (in vscode) and select all matches, then change the classname

Upvotes: 1

Related Questions