Add SVG sprite support as third-party plugin

I'd like to suggest a third-party plugin for Lasso to bundle SVG sprites. If a modularized site has dozens of icons it would be great to have a way to bundle only the SVG icons that are needed on any given page based on the SVG icons referenced in each module's browser.json.

SVG sprites have many advantages over icon-fonts including sharper clarity (no glyph anti-aliasing) and easier manipulation with CSS.

A simple and highly compatible technique for creating SVG sprites is outlined in Chris Coyer's article, Icon System with SVG Sprites as well as the "HTML Inline SVG Sprites" section of the 24ways article, An Overview of SVG Sprite Creation Techniques.

According to the 24ways article, while it might be ideal to have an external SVG that could be cached, this technique has problems in all versions of IE.

Referencing an external SVG sprite in HTML

This technique also works in all browsers supporting SVG except Internet Explorer – not even IE9+ with SVG support permits this technique. No version of IE supports referencing an external SVG in <use>.

In a nutshell, HTML-inline SVG sprite icons would be aggregated in the format below (though it should be minified) and then inserted at the top of the <body>:

<body>
<svg style="display:none;">
  <symbol id="twitter-icon" viewBox="0 0 32 32">
    <path d="M32 6.076c-1.177 …" fill="#000000"></path>
  </symbol>

 <!-- remaining icons here -->
  <symbol id="instagram-icon" viewBox="0 0 32 32">
   <!-- icon contents -->
  </symbol>

  <!-- etc. -->
</svg>

The developer would then embed icons into the HTML with the following syntax:

<svg class="twitter-icon">
  <use xlink:href="path/to/icons.svg#twitter-icon"></use>
<svg>

lasso-svgstore?

One option may be to try to port Andrey Kuzmin's (aka @w0rm) excellent Gulp plugin, gulp-svgstore, (or grunt-svgstore) which offers a multitude of options for bundling SVG sprites, including HTML-inline sprites, external sprites and PNG fallbacks.

lasso-js / lasso

Add SVG sprite support as third-party plugin #104

lasso-svgstore?