Svg will crack when import with ReactComponent

hui21109 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

stramel commented 5 years ago

@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 commented 5 years ago

Friendly ping to @Timer @iansu

paperkotter commented 5 years ago

@stramel looks like svg ids conflict.

hui21109 commented 5 years ago

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

stramel commented 5 years ago

@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 commented 5 years ago

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] commented 5 years ago

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 commented 5 years ago

@timer @iansu

wooolfgang commented 5 years ago

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 commented 5 years ago

any solution regarding this ???

khmaies5 commented 5 years ago

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

Waseemrajashaik commented 5 years ago

@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 commented 5 years ago

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

Waseemrajashaik commented 5 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

nvcherak commented 3 years ago

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

PloskiyShar commented 3 years ago

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"

I'm grateful to you. It saved my live. thanks

facebook / create-react-app

Svg will crack when import with ReactComponent #5723