Create-react-app: Svg will crack when import with ReactComponent

[hui21109]

I have several needs to hover a button and change color of the svg path stroke/fill
It will work perfectly most of time I use it as a component can assign a classname.
While sometimes the svg image will crack and I sure it is complete when I use it as I think it is a bug, thanks for help

FYI svg source : https://reurl.cc/8yAkX

Import {ReactComopnent as Graph } from '..../.svg'

render() ....

< Graph/>

npm 6.4.1
react 16.6.0

---

Thanks for your patient :)
I finally get a simple one.
Here is the code :

import React, { Component } from 'react';
import './App.css';
import {ReactComponent as A }　from './A.svg'
import  {ReactComponent as B }　from './B.svg'
class App extends Component {
  render() {
    return (
      <div className="App">
       <A/>
       <B/>
      </div>
    );
  }
}
export default App;

and FYI here is those 2 svg
https://reurl.cc/ZGlzg
https://reurl.cc/gWnEV

btw, you might need set background color to see it clearly.

This is how it happened :
as long as I use them in the same time, one specific svg will crack.
In this situation, B will become an incomplete image...
like this :
Not for every svg. I try to edit svg like delete and
It works only for another svg..., but not for every svg files.
Thanks for help

[gaearon]

Why did you close? If the issue is unsolved we will look eventually. Otherwise please leave a comment with the solution for the next person to encounter it.

[hui21109]

I try it in a clean project and find it works .
The situation I encounter the crack image is in a complex component.
I will try my best to show the same bug again then I will open a new one (or how can I open it again?)
thanks

[Timer]

I reopened this for you. Please post a demo at your earliest convenience.

[stramel]

@Timer @gaearon I _believe_ I have run into the same issue as @hui21109.

Here is a codesandbox that I created with 2 icons that I am using. https://codesandbox.io/s/38394ww291

Please note that it doesn't matter which icons I use. If I change each icon to have a different id for the path and mask the issue no longer exists.

Also, note, this is even more noticeable when using a minifier on the svgs as all ids start a, b, etc

[stramel]

Friendly ping to @Timer @iansu

[nebakry]

@stramel looks like svg ids conflict.

[hui21109]

@nebakry is right, at least in my case. Let's wait @stramel to confirm his part...
Thanks !

[stramel]

@nebakry right. That is the problem, once they get optimized every svg has the same ids. However, that shouldn't be affecting the outcome of what is displayed.

If you pull in just the paths for the icons and use them in img tags it doesn't break. It only breaks using the ReactComponent version. You can observe that here. https://codesandbox.io/s/o835wooxy

[hui21109]

yes, same here. However, I have the needs to change the path color of svg so I need to import it as ReactComponent. Now I am not sure if it is an issue of React, or it is my problem that I should check the svg before using it.
waiting for new reply , thanks

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stramel]

@timer @iansu

[wooolfgang]

Hi, just encountered this bug as well. I'm not quite sure how to reproduce this, but it occurs randomly depending on the svg file that you are importing. Here's a video example https://www.useloom.com/share/b545e4797fa446a5adad39c1df9111c2

When using publish svg it works fine, but with the cat svgs it breaks, and sort of changes its visual after the final render. Current solution is to import the svg as image, but you will be limited with no animations/transitions.

[Waseemrajashaik]

any solution regarding this ???

[khmaies5]

i encountered the same bug, is there a solution for this ??

[Waseemrajashaik]

@khmaies5 the create-react-app v3 solve problem of svg as React Component . you can directly use them - but if you face this issue again that mean's svg file has similar id's in it . just change them - it will work fine

[sartios]

@Waseemrajashaik in which version is it fixed? I'm using 3.0.1 and getting the same behavior

[Waseemrajashaik]

@sartios you can check version - https://github.com/facebook/create-react-app/releases/tag/v3.1.0

if you still facing the issue - as i mention above please change svg's which contain similar id's
id's should be different

[codeheroics]

Hi! I just faced this issue while importing SVG files as React components, and this seems like a big deal breaker:

• Most developers won't know that this is a potential problem happening when working with CRA, and as it is a pretty weird / obscure bug (only happened when testing on Firefox in my case) it's a real time waster
• Even knowing that this can happen, since SVG are often numerous and provided by other people / libraries / generated by some means or others, I don't think it's reasonable to assume developers would manually check their SVG files to ensure no ids are duplicated ; however not checking for this means that using CRA will sometimes mean disappearing SVGs. Perhaps a warning could appear when duplicate ids are detected?

Finally, I'd like to add that enabling svgo after ejecting fixes this issue, and that part of the reasoning for disabling svgo in #5062 was that

Different optimization behavior based on how the SVG is imported would be confusing/unexpected to the user, especially during debugging.

This is, however, a super confusing issue caused by the fact that it is disabled.

Maybe the documentation on this page warn about this bug until it's resolved?

[BipinBhandari]

I agree with @codeheroics. This was quite confusing issue because some svgs were working but some were not.

I solved this problem by using prefix-svgs svgo plugin.

Basically it would convert id to filename prefixed ids.

I added svgo to package.json and I created yarn script as this which would recursively apply this plugin to all svg file:
"prefix-svgs":"svgo -f . -r --enable=prefixIds"

[hui21109]

I haven't encountered the same issue after I use 'react-inlinesvg',
maybe you can try this first

[NVCherak]

I fixed it just by change id in clipPath. Thanks!)

@sartios you can check version - https://github.com/facebook/create-react-app/releases/tag/v3.1.0

if you still facing the issue - as i mention above please change svg's which contain similar id's
id's should be different