Svg-sprite-loader: Import of SVG-file fails with extraction (returns undefined)

[wanecek]

With my current build-process, the import of an SVG-file returns undefined when extraction is turned on. with { extract: off } it returns an object as expected per documentation.

I have created a reduced test-case, which I will hope assist the debugging process.

Details of my setup:

• Windows 10
• Node v. 7.2.1
  See package.json for further details.

To Reproduce:

• Download the test-case and install dependencies.
• Start up the project with npm start. This should launch your web-browser at http://localhost:3000.
• Open the console, and see that undefined is logged by Shell.vue:12, which attempts to log the import of ./assets/arrow.svg.
  
  
  
  • In build/webpack.base.conf.js:59, set extract: true and run the build process again.
  
  

[kisenka]

I found 3 issues:

1. svg-sprite-loader in extract mode sometimes return wrong symbol url. It was fixed in [email protected] (beta).
2. Sprite loader plugin used twice - here and here.
3. I am not sure, but looks like <svg><use xlink:href/></svg> embed method will not work with external sprite. I've replaced it with <img src="sprite.svg#id"> and it works:

Check my fork with updates - https://github.com/kisenka/svg-sprite-loader-test-case

[wanecek]

Hi! Thank you very much for your reply and your thorough help!

I've taken note of the issues you found (sorry for the duplicate SpriteLoaderPlugin - my bad), and fixed them in recent commits. Furthermore, I've vastly simplified my test-case, e.g. by removing Vue from the build.

What I found was that using the beta-version removed the support for SpriteSymbol - instead a (system-relative) path is logged.

If you have more time to debug, I've pushed my changes to the same repo as before.

Thank you for your kind help and patience.

[kisenka]

I think I understand what you want - svg image should goes to external sprite, but symbol (SpriteSymbol<id: string, viewBox: string, content: string>) should returns from import statement instead of symbol url. Am I right?

[wanecek]

That is exactly what I want! :) Is that not the expected behavior?

[kisenka]

Basically not, but I'll think about it. However it can be done via custom runtime generator, it was created for cases when you need some special stuff :) I've added example with extract mode in __interop__ branch:

• Example dir
• source code
• built code. Here you can see that loader returns object with width. height, viewBox and url props, but sprite is in separate file - sprite.svg
• runtime generator implementation, rather simple

[wanecek]

This is great, thank you! I'm very grateful of your commitment and help.

I'm still running into some issues with the sprite-loading though. More specifically, I cannot get the url to output the correct fragment-URL (e.g. sprite.svg#twitter-usage).

I've updated the test-case with the runtime generator, where it's evident that the url is undefined when using 2.0.5, and the system-relative path when using beta.

For 2.0.5, in the runtime-generator, symbol.request is C:\Users\NUC-10\Desktop\svg-sprite-loader-test-case\src\assets\arrow.svg and the spritePlaceholder is {{sprite-filename|C:\Users\NUC-10\Desktop\svg-sprite-loader-test-case\src\assets\arrow.svg}}

[kisenka]

As I said here:

svg-sprite-loader in extract mode sometimes return wrong symbol url. It was fixed in [email protected] (beta).

[wanecek]

I've noted that. Unfortunately, this still returns the system-relative path instead of the build-relative path (i.e. C:\web\mainstream\src\assets\icons\logo.svg instead of sprite.svg#logo.)

If this is the expected behavior, it'd be lovely if you could give me a pointer for what to modify.
If not, and this is an issue, I can help resolve the issue if you give me pointers to as where to look :)

[kisenka]

That strange. Could you push latest changes in your repo so I can check?

[WalterZou]

@kisenka I have the same problem as @wanecek got:

I've noted that. Unfortunately, this still returns the system-relative path instead of the build-relative path (i.e. C:\web\mainstream\srcassets\icons\logo.svg instead of sprite.svg#logo.)
If this is the expected behavior, it'd be lovely if you could give me a pointer for what to modify.
If not, and this is an issue, I can help resolve the issue if you give me pointers to as where to look :)

When extract: false
Input:

import Logo from './assets/logo.svg'
console.log(Logo)

Output:

/D:\Code\DEV\svg-sprite-loader-test-case\src\assets\logo.svg

When extract: true
Input:

<img src="./logo.svg" alt="">

Output:

<img src="[object Object]" alt="">

This is my test case repo

[kisenka]

@WalterZou could you please create repo with your setup?

[wanecek]

@kisenka Commits are pushed to the repository

[kisenka]

Got it, it's Windows path resolving issue. I will have access to Windows machine tomorrow, stay tuned!

[wanecek]

Excellent @kisenka! Thank you very much for your help

[kisenka]

@wanecek please check [email protected]

[wanecek]

Works like a charm! Thank you for all your help Kisenka.