brick: Use data URI SVG

[jrchamp]

Fixes #17
Fixes #26

It looks like main.js doesn't exist any more, so if accepted, this will reduce both the number of total network requests and bytes.

I took the .eps from brand.ncsu.edu, passed it through inkscape to get a plain SVG, crunched it down with SVGOMG precision 3 and fixed the red color to #c00 (3384 bytes uncompressed when base64 encoded).

I didn't rebuild the dist file as part of this, so that will need to be added to this before merging.

Please let me know what you think!

[apmatthews]

Looks good to me. I pulled it down and tested locally. I think it makes sense to add the dist file and then look at merging.

I did end up removing main.js in c35fd5e, for reference.

Something else to consider: https://css-tricks.com/probably-dont-base64-svg/

The other SVGs on this project are base64 so I don't think we have to do the brick differently, but I've used that article's method for the past couple of years with good results.

[jrchamp]

Hi @apmatthews

I used the URL encoding process as described in the article you mentioned on each of the SVGs. The new scss file is 17.3% smaller than the original (even after adding the brick SVG as a data URI).

[apmatthews]

@jrchamp Awesome! Looks like you were able to get it to build too? I was having some trouble building for production (npm run production). I think it's probably due to an old bug in SVGO. My guess is this wasn't an issue before because there wasn't any true SVG markup in the source, but the new URL encoded SVGs are probably being picked up by SVGO. #26 might be the answer, but I'm curious if you ran into any issues in 2490799.

[jrchamp]

I had to tell postcss-svgo to leave it alone since it was already optimized to get it to build. #26 solved the issue for me.

[jrchamp]

Do you want me to add the build system update that worked for me to this pull request?

[apmatthews]

Yes, please 🙂

[jrchamp]

Done.

[jrchamp]

It's all building cleanly for me. sass-loader should be current now too. Please let me know if you have any questions.

[apmatthews]

I'm able to build now, but seeing this:

The issue is that whitespace isn't being stripped out of the HTML template during the production build. I think that's what this line is supposed to do, but maybe it's not respected in the latest version of the build packages?

[jrchamp]

Hmm, I think they moved some of the "options" to "sassOptions".

[apmatthews]

I just added the dist folder to .gitignore to make PRs a little simpler and cleaner. Would you mind merging that in from master and excluding the dist updates from this PR?

[jrchamp]

Done. I rebased the changes so that it doesn't have the dist file flipping back and forth. It looks like minimize: true has removed the extra whitespace characters from the html-loader.

[apmatthews]

@jrchamp Thanks for the contribution and for rolling with all the build updates. I've dropped it on the CDN. I'm not entirely sure how long it takes to move through all the pipes, but we should see this update in production sometime today. Thanks again!