url() in css does not work properly

[peacememories]

When i use a url(...) in an scss file, the correct file name is exported, but the svg is still emitted with a <symbol> wrapper, causing the result to be invisible.

[peacememories]

I think this could be improved by adding a #... to the url in css, so the fragment is accessed, but I'm not sure how to do that.

[Epimodev]

Hello !
I don't think we can access to a symbol ref from css url(...)

For the moment the only way I found to avoid wrap some file in <symbol> to use it in css is to ignore files which are in an assets folder and copy the file in build folder.

So you if you move the svg file you want to use in a folder named assets it should work

[peacememories]

Yeah that's what I did for now. Maybe we should bring that up with the parcel team? It seems changing the ref could be important in other situations too

[Epimodev]

I don't think we need some changes in parcel. The behavior with assets folder is coded in this plugin.
Maybe I can improve that by adding an option in package.json to configure which files are include in <symbol> tag

[Epimodev]

Hello!
I just create this PR #6 to add the possibility to configure file paths we don't want to inject in the svg sprite.

With this solution, you'll be able to import svg files without moving files in an assets folder. Instead, you'll have to set in package.json path patterns you don't want to inject in the sprite.

What do you think about this solution?

[peacememories]

I think that's definitely a good idea. For our project it's okay to move the assets to an assets folder, but it might not be okay for everyone.
But I think we should also look into making the spritesheets compatible with css. It should work in theory ( url(path#fragment) works), and I think making this work would follow the principle of least surprise :)

[Epimodev]

I didn't know that url(path#fragment) works for css background. After some search, I learn that it doesn't work exactly like <use xlink:href="path#fragment">

With <use xlink:href="path#fragment"> you can reference <symbol> element whereas with url(path#fragment) you can reference only <view> element. (there is an example here: https://codepen.io/jennhi/post/using-svg-symbols-as-css-backgrounds)

I tried to use background-image: url(#fragment) and it didn't work and I didn't find how we can do this.

So if we want to make it works with css the plugin should generate sprite in an svg file instead of injecting it in HTML.
But this solution has a disadvantage (and it's the main reason I created this plugin) I explain here: https://github.com/Epimodev/parcel-plugin-svg-sprite#why-inject-svg-sprite-in-html-instead-of-using-an-external-file-

So today I haven't any idea of how to make sprite works with css background without impact on the use case with <use xlink:href="path#fragment">

I let this issue opened in case you or someone else find a solution to this problem.
I'll merge #6 today which makes the plugin more flexible even if it doesn't solve completely this issue.