[Feature request] automated svg-sprite (I would do the work)

[Dan503]

Would you be interested in a pull request that added automated svg-spriting to the build process?

How you would use it

1. Save an svg file into this folder: /src/_images/svg-sprite-src
2. Run one of the gulp compile commands (eg. gulp serve) to compile the sprite
3. If using Jade, use +svg('file-name') to use an svg from the svg-sprite. If nunjucks then you would use {{svg.content('file-name')}}
4. Editing an svg file or saving a new svg in the folder would instantly recompile the svg-sprite for you and refresh the page automatically.

Why you would want it

Using SVG sprites to handle site icons is a really good way to handle iconography. They are more reliable than icon-fonts and are a bit easier to style. You can read more about the benefits of using svg's for icons here https://css-tricks.com/icon-fonts-vs-svg/

I like to use svg-sprites more than inline svgs. Icon's are most of the time only a single color which is easily alterable through css even if it is in an svg-sprite. Inline svgs add a lot of page weight to the page that is not able to be cached. svg-sprites are a single download that is then cached by the browser. Referencing the sprite for each icon is then a simple svg element with a use element in it rather than the full svg markup every time you want to use an icon.

Creating and maintaining an svg-sprite manually is a very tedious task that is prone to human error. Automating the process removes both the human error and the tediousness allowing you to spend time on more productive tasks.

How it would work

• It would be powered primarily through gulp-svg-symbols using a new "svg-sprite" gulp task.
• It would look up all svg files in the /src/_images/svg-sprite-src folder and place the generated svg-sprite into a [taskTarget]/images/svg-sprite.svg file.
• The svg module code would equate to this html <svg class="file-name"><use xlink:href="./images/svg-sprite.svg#svg-file-name"
• For IE11 support, I would load the svg4everybody plugin which inlines the svg's for you if the browser doesn't support external xlink:hrefs.

Are you happy for me to implement this feature for you?

[sahandii]

This could be a really nice feature! I was thinking, I like to inline my SVGs directly in my HTML files, do you think it would be possible to make that kind of mixin (+svg('file-name') and then it would actually take the external file and put it directly in the markup? AFAIK, CSS styling is still not possible to be added to SVG if it's loaded externally?

Love yeogurt so far btw! Has been my main framework lately and has made me use Jade as standard for my HTML markup just because of it!

[Dan503]

There is no need for full inlining to be done through a mixin. Jade already allows for easy svg inlining by simply writing an include that points to the svg file.

include ../path/to/file.svg

The disadvantage of svg-spriting compared to inline-svg is that it limits your ability to style the svg (Although it is still stylable to a degree).

The advantages of svg sprite are:

• icons can be cached
• far cleaner markup in the output html
• reduced page weight

Trying to manage an svg-sprite manually is a massive pain in the ass though. That's why I want to automate it.

[Dan503]

CSS styling is still not possible to be added to SVG if it's loaded externally?

Limited styling is possible in an svg sprite.

Generally the only styling you would be applying would be svg { fill: #fff; }

Something like this won't work on an svg-sprite svg path { fill: #fff; }