<symbol> + <use>?

[mustafa0x]

Awesome project, thanks! I have an svg file with content like

<svg style="display: none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="foo" viewBox="0 0 20 20"><path d="..."/></symbol>
    <symbol id="bar" viewBox="0 0 20 20"><path d="..."/></symbol>
  </defs>
</svg>

Then I would embed a specific symbol using <svg class="icon"><use href="icons.svg#foo"></svg>

Using this plugin, is there an easy way to achieve this?

[poppa]

Hi @mustafa0x!

I'm not sure what you'd like this plugin to achieve in this case?

[korywka]

I think he is about using SVG sprites: https://css-tricks.com/svg-sprites-use-better-icon-fonts/
IMHO not a scope of this plugin.

[mustafa0x]

Yes, sorry for not clarifying. I'm trying to figure out the easiest way to reference a <symbol> from an svg file, using this plugin.

Given this svg

<svg style="display: none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="logo" viewBox="0 0 20 20"><path d="..."/></symbol>
  </defs>
</svg>

I'd like to get logo using something like this

<script>
import Icons from "./icons.svg?component"
</script>

<Icons id="logo" />

or this

<script>
import Logo from "./icons.svg?component&symbol=logo"
</script>

<Logo />

[poppa]

I will look in to this during the hollidays, to see if I can come up with a viable solution.