Importing SVGs as Components in ReactJS

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