search

RobotsAndPencils / react-gantry

R&P's React Starter Kit
4 stars 1 forks source link

SVG Webpack Setup #6

Closed akrigline closed 6 years ago

akrigline commented 6 years ago

This builds off of PR #2 and provides an answer to Issue #3.

Using a combination of Rule.oneOf and Rule.resourceQuery from webpack we can make importing SVGs default to the file loader, but with a ?inline flag on the import path use the react-svg-loader instead.

No unnecessary splitting of directories, totally reusable files, just a different way to import as demonstrated in the /src/components/profile/profile.js file.

To Test

Pull, npm run start and observe that the SVGs on the Profile component both work. npm run build should pull the svg file into the bundle because it's needed for the <img> usage.

akrigline commented 6 years ago

So this is a problematic thing for jest: https://github.com/facebook/jest/issues/4181

I've been hunting this problem for a few hours and finally found that issue. I still think this is our best svg solution, we'll just need some more effort to enable testing.

akrigline commented 6 years ago

I've solved the problems I introduced with this webpack setup in a future branch that has started setting up testing. As such, I think this config is an excellent solution.