Rectangle 27 0

My approach to this is to use grunt-svgstore with the following settings in the Gruntfile.js

svgstore: {
  default:{
    options: {
      prefix : 'icon-', // This will prefix each ID,
      svg: { // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG
        viewBox : '0 0 100 100',
        xmlns: 'http://www.w3.org/2000/svg'
      }
    },
    files: {
      "<%= folders.src %>/jade/_svgDef.jade": ["<%= folders.src %>/svg/*.svg"]
    }
  }
}

Note: I'm compiling all of the SVGs in my folder directly into one jade file, that I include in my layout.jade like so:

.svgdef(style="display:none;")
  include _svgDef
svg(viewBox="0 0 100 100", xmlns="http://www.w3.org/2000/svg")
    use(xlink:href="#icon-Twitter")

Which is cool, because now you can style this SVG within your CSS, while keeping your edited jade files free from clutter!

javascript - How to use SVG with grunt and jade - Stack Overflow

javascript html css svg gruntjs