ReactJS - Importing SVGs as Components

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