Extract true vs false inconsistencies

Currently, I’m using v2.1.0 and my code looks like:

import icon from './icon.svg';
// ...
<svg viewBox={icon.viewBox}>
    <use xlinkHref={`#${icon.id}`} />
</svg>

This works perfectly when extract: false. However, whenever I set extract: true, icon is now a string. I could check the type of icon but the problem is that viewBox is no longer available. May I ask you why? Or am I using the loader in the wrong way?

PS: I read that providing a custom runtimeGenerator could solve my issue, however sounds a bit overkill, especially because I might need to copy-paste all default generator code, just without an if statement.

[jburghardt]

why does the id of the icons differ in the mode ?

should it not generate the same id ?

#icon in runtime mode. #sprite.svg#icon in extract mode.

having the sprite-loader add the -usage string to every id is very confusing

[albertogasparin]

Great, version 3.0.1 correctly set the viewbox attribute, however the id is still problematic. The issue with the current output is that icons do not work if the svg is inlined in the page (technique used to support all browsers).

What happens is that the svg generated has symbol with the original id and use tags with the -usage id. However, the style inside the svg hides all use#xyz-usage elements so the icons do not appear as the imported id refers to the hidden use tag, not the symbol.

• svg <symbol id="icon" /> is correct
• svg <use id="icon-usage" /> has display none
• import icon returns id=icon-usage when extract mode is true, which is hidden

I could replace the -usage in the id string in my own components (or add a css that forces the sprite-symbol-usage display) , but I still think that id should be consistent regardless of the extract flag, and the -usage suffix should only be added on the url property (where it makes sense).