We've learned that build tools are a particularly awesome for tasks like turning a folder full of SVGs into an SVG defs block. As is always the case in this lovely web world we live in, there is always more than one tool for the job. There is certainly more build tools for this than the two we've looked at so far.

Using Gulp? gulp-svg-sprites

Don't need inline SVG and just want to embed the SVG icons into a CSS file? Try Grunticon or the in-browser tool Grumpicon.

Want an alternative Grunt plugin? grunt-svg-sprite

Want to try a super robust and customizeable tool? Try Iconizr (or in the browser).

Comments

  1. User Avatar
    David Kizler
    Permalink to comment#

    Fontastic is another nice solution for designers not quite ready for Grunt or Gulp. It gives you a link for the head so they host the def file for you, and you can just insert the svgs as needed. I think it used to be just for icon-fonts, but now you can select an svg option.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag