Add option for symbol based output for use with <use>

Do you want to request a feature, report a bug or ask a question? Feature

What is the current behavior? Symbol markup in the sprite is wrapped in <defs>, includes a <style> block, and includes a <use> for each svg item. The reasoning for this is explained in https://github.com/kisenka/svg-sprite-loader/issues/122 .

What is the expected behavior? If the developer will only be refering items in the sprite via <use xlink:href="sprite.svg#item-name"/> and not in CSS or <img> then allow svg-sprite-loader to generate a simpler output without the things mentioned above (defs, style, use).

If this is a feature request, what is motivation or use case for changing the behavior? No need for the extra markup bloat when only using <use xlink:href="sprite.svg#item-name"/>; smaller file size.

Please tell us about your environment:

• Node.js version: 8.5
• webpack version: 3.6
• svg-sprite-loader version: 3.2.5
• OS type & version: Linux, Fedora Linux x86_64

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc) Example of current output:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>
    .sprite-symbol-usage {display: none;}
    .sprite-symbol-usage:target {display: inline;}
  </style><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" id="anchor">
    <circle cx="12" cy="5" r="3" />
    <line x1="12" y1="22" x2="12" y2="8" />
    <path d="M5 12H2a10 10 0 0 0 20 0h-3" />
</symbol></defs><use id="anchor-usage" xlink:href="#anchor" class="sprite-symbol-usage" /></svg>

Example of proposed simplified output:

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="anchor" viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <circle cx="12" cy="5" r="3" />
    <line x1="12" y1="22" x2="12" y2="8" />
    <path d="M5 12H2a10 10 0 0 0 20 0h-3" />
  </symbol>
</svg>

[kisenka]

Closing this one, there is a bug described by @MaxMilton, please follow #221

[maxmilton]

Inline is not a good idea if you have icons which repeat, no point defining the same code multiple times. The <use> technique is great since SVG resources only need to be defined once and you can style the same SVG item in different ways.

I’m not sure that this package is the right place to do file inlining as its purpose is to create an SVG sprite, although there may be some SVG parsing logic you could use to write a custom loader.