Enabler: Redo how we build Sprites

[bryanpizzillo]

Redo how we build sprites and remove Gulp

ESTIMATE TBD

We have updated node-sass and need to change how we build sprites to better support the ncids efforts. There was discussion on what approach will work best. It looks like the two choices are:

• Spritesmith (Downloads/week 13,000) - This works kinda like what we have now. Webpack will iterate through the list of files in the sprites folder and make the sprite map for Sass.
  • This might work as a drop-in replacement without changes needed to the Sass
• svg-sprite-loader (Downloads/week 260,000) - Theoretically this will build the sprite sheet for us automatically based on url references in our Sass files. We then would reference the sprites by id instead of needing the sprite map for the offsets.
  • One potential benefit is that we can define separate entry points for sprites maybe. I.E. Common Sprites could be separate from CTS. Basically, if much of our traffic gets to us through Google, and they do not navigate elsewhere, it is more important to ensure smaller downloads vs caching larger items for reuse that are not used on one time visits.

Tasks

• [ ] Remove the following
  • gulp (this also optimizes png, jpg and gif files too.)
  • svg-sprite
  • gulp-svg-sprite
• [ ] Move sprite building into web pack
• [ ] Modify Sass mixins for sprites? 1, 2
• [ ] Remove our phantomjs build hacks
• [ ] ENSURE FINGERPRINTING OF SPRITE!!!

Notes

• This should resolve #1263

[bryanpizzillo]

Investigation Notes:

We use the spritemap to determine the height/width of the background content element when using the icons. This is not generated when using svg-sprite-loader, since that just makes a sprite of what has been asked. It should be noted that USWDS and other design systems we have looked at require the person using the icon to state what size it is in the SASS.

The best fix for this would be to redo how we add our sprites and get rid of all the height/width stuff. It really seems like this was a port from png based sprites only updated to change the filename.

[bryanpizzillo]

We are going to kick the can once again and move out of MVP