svg-sprite-loader

svg-sprite-loader copied to clipboard

• Node.js version: 10.15.0
• webpack version: 4.43.0
• svg-sprite-loader version: 4.3.0

In source svg code:

<svg viewBox={`${icon.viewBox}`} width="15" height="15">
    <use xlinkHref={`sprite.svg#${icon.id}`}/>
</svg>

When using the extract: true option, compiling yields:

xlink:href="sprite.svg#iconname-usage"

Why is -usage added? As a result, the link becomes invalid.

Because iconname is an id of sprite symbol and it's usage can be the same:

<svg>
  <symbol id="iconname">...</symbol>
  ...
  <use xlink:href="#iconname" id="iconname-usage" />
</svg>