If you attempt to import a SVG as a Component in ReactJS, ensure that your SVG has viewBox values. Design tools would automatically include them. Lesson Learned!
I was trying to make a SVG responsive but no matter what I tried it did not work.
I was optmizing the SVGs before using them in ReactJS, if you import the files normally then yes this helps. However, as Components, WebPack automatically optimizes them I suspect – as I don’t see meta data in the file during run-time via network console.
Case: From 1000 SVG http request to zero
Only down size is larger chunks.
Links that helped me solved my problem and also some extra learnings
https://swizec.com/blog/build-easier-responsive-svg-layout-react-svg-flexbox/swizec/8577
https://github.com/zoopoetics/react-svg-flexbox
https://swizec.com/blog/ref-callbacks-measure-react-component-size/swizec/8444