Svg-sprite-loader: Extract true vs false inconsistencies

[albertogasparin]

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.

[kisenka]

The main goal for extract mode is import images from CSS/HTML:

.logo {background-image: url(image.svg)}

/* compiled to */
.logo {background-image: url(sprite.svg#image-usage)}

In this case you don't need any data from image expect it's final URL. But seems like users want to use external sprites from JS too. It's a feature request.

[kisenka]

@albertogasparin please check [email protected].

[albertogasparin]

I'm sorry to say that it is not yet working. Looks like generateExport expects a string, and as you are passing an object with a custom toString implementation, it returns the exact same output as v2.

[albertogasparin]

On top of that, the id returned from the extract: true mode is different (looks like it appends -usage to the original id), making it harder to use it dynamically.

[kisenka]

@albertogasparin oh shi~, thanks for reporting, fix it asap

[kisenka]

Fixed in [email protected], please check

[kisenka]

• Generated export (object)
• Demo, see DOM in devtools

[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).

[kisenka]

@albertogasparin I can suggest to add useId property with right value, I will be ok for you?

[kisenka]

Ah, I see what you talking about. External sprite which will be injected in the page should not contain any styles at all.

[albertogasparin]

I have nothing against a useId property, but I would personally try to limit the API surface in order to reduce the confusion for the consumers.
Why don't you use id and url for the two scenarios:

1. People who want to use svg externally should use url property on the use tag. That will be ./path/sprite.svg#icon-usage when extract is true, otherwise just icon

2. People who want to use svg injected in the page should use id property on the use tag. That will always be icon, regardless of extract flag.

What do you think? Are there any other scenarios?

PS: I'm just trying to help you out. At the end of the day this is your work, so feel free to ignore my suggestions, as you already did a great job with this loader 😉

[kisenka]

Why don't you use id and url for the two scenarios...

I am almost agreed, here is my suggestion with a few updates:

1. id should be always an symbol id in the sprite. It could be used to generate reference in runtime mode, but it's not necessary.
2. url is always presented, and it's mode dependent:
   
   
   
   • #icon in runtime mode.
   
   
   • sprite.svg#icon-usage in extract mode.
   
   
3. viewBox, width and height are always presented.
4. toString() is also always presented.

In this case runtime & extract mode differs only in used JS wrapped code.

PS: I'm just trying to help you out. At the end of the day this is your work, so feel free to ignore my suggestions, as you already did a great job with this loader 😉

Wrong, your thoughts is important for me, as other useful thoughts from my users :)

[albertogasparin]

☝️Sounds great!

[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