Remove style attributes on default SVG template

as mentioned here putting a style like:

style="width:0; height:0; visibility:hidden;"

is not very helpfull.

Even more when you reference the SVG externally, like:

<svg role="img" class="icon icon-pouic">
  <use xlink:href="/svg/svg-symbols.svg#icon-pouic"></use>
</svg>

It should be:

• removed from SVG template
• add in the doc the “hidden accessible” CSS (like in #23)

[kencrocken]

Why not use a custom template?

// custom-template.svg
<svg xmlns="http://www.w3.org/2000/svg" class="your-custom-class"><% if(defs) {%>
  <defs>
      <%= defs %>
  </defs><% } %><% _.forEach( icons, function( icon ){ %>
    <symbol id="<%= icon.id %>" viewBox="<%= icon.svg.viewBox %>"><% if (icon.title) {%>
      <title><%= icon.title %></title><% }%>
      <%= icon.svg.content %>
    </symbol><%
}); %></svg>

// In gulp task
...
.pipe($.svgSymbols({
        id:      'icon-%f',
        className:  '.icon-%f',
        title:      false,
        fontSize:   32,
        templates: [ path.join(__dirname, 'custom-template.svg'),'default-demo' ]
    })
...

see here

[Hiswe]

Yep, using native modules is often a good idea 😃