Reputation: 97
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
Upvotes: 0
Views: 624
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