Added a build process for creating a SVG sprite that using symbols

[levimcg]

See #2 for more background on this.

I've added a basic build set up for creating a SVG sprite sheet. This build step creates a rvt-icons.svg file from all of the source .svgs in the ./src/svg/ directory. The bundled file can then be used referencing the <symbol> elements inside like so:

<svg class="rvt-icon">
  <use xlink:href="./svg/rivet-icons.svg#rvt-icon-alarm"></use>
</svg>

This is a bit of a rough start, but I'd like to get some feedback on how we might distribute this as some sort of package. Right now the build process will create a dist/ folder with the bundled rvt-icons.svg file inside, but I've added that folder to the .gitignore for now.

@basham I'd like to get some feedback when you get a chance since you created to original issue. I with a bit of optimization and clean up we could publish something like this as an npm package, but I wonder how useful that would be? I think that would make a lot of sense for folks using Webpack where you could just import 'rivet-icons.svg'; or whatever. Any thoughts?

[basham]

This is a great first step. Thoughts:

1. Docs should be updated to discuss use of SVG symbols, which is elaborated some in #2. But a polyfill should be used if the symbols file will be external and wanting IE support. You can inline the SVG symbol file in HTML, and then you don't need the polyfill.
2. The demo doesn't work locally: "Unsafe attempt to load URL from frame with URL . 'file:' URLs are treated as unique security origins." However, this will probably work in GitHub.com, because it is hosted.
3. This can wait for a future release, but perhaps this repo could include a generic script for creating a custom symbol string based on which icons are desired (as discussed in #2). Then the developer could save that custom string as a SVG file or inline it in the HTML.
4. Publishing this to npm would be great. Just make sure the SVG icons and the SVG symbol file are all available. You can use npm pack to test what will be bundled to npm; I just recently discovered this, making me more confident with publishing.
5. There's a server where Mark Fyffe hosts versioned files of Rivet CSS and JS, along with other assets, to be shared among ESS products. The icons file would be an easy include in that service. So, that could be quite useful.

[levimcg]

Great, thanks for the feedback. All good points here. I only just learned about npm pack from @illusivesunrae, soooo handy! Good call on the docs, I hadn't started on that at all.

The demo doesn't work locally...

Hmmm, that's weird? It was working locally for me, I'll look into what's going on there.

[basham]

The demo doesn't work locally...

Never mind. I was just manually opening index.html, because I didn't realize about npm run start. After starting the server (not just using npm run build), then I was able to open localhost and the icons worked.

[levimcg]

Aaah, cool. Good to know, thanks. I'll try to make some time to update the docs to be a little clearer on running the local dev server. 👍

[levimcg]

Just a heads-up on this. We've be trying to migrate all of our Rivet-related repos over to using the a separate gh-pages branch for demos instead of committing the docs folder to source. We kept running into confusing situations where folks folks either were editing the built files, or it was a pain to always have to remember to re-build and re-commit files in certain situations.

From now on, once feature branches get merged into master someone with push access will need to run the deploy script in package.json to push a fresh copy of the demo page to a gh-pages branch. In the future we'll work toward getting a CI process in place that can push back to the gh-pages branch when feature branches are merged into master.