Svg will crack when import with ReactComponent

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() …

<div> < Graph/> </div>

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 <defs> and <mask> It works only for another svg…, but not for every svg files. Thanks for help

[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"

[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