How to make and connect SVG sprites for vue?

Question

Sprites

You need to make an svg sprite and connect it to vue.
The project uses vue 3 and typeScript.
How to do it better?
Perhaps there is some kind of plugin convenient?

Answer 1

Currently, when there is http2 from sprites, there is not much sense, especially from svg sprites.
The best way would be inline svg, but to make it more convenient, there is vue-svg-loader

Answer 2

Projects are very different.
For example, we use a sprite (video platform) because there are a large number of repeating sprites on a page (any).
Inlining is not an option for us at all - problems with the cache.
You really don’t need to bother with a sprite because of one or two icons, but when there are a lot of them, then the inline will be an unnecessary shot in the foot.
When combined with a convenient component, it becomes easier to live.

<sprite
  name="user-icon"
  :fill="isAuthed ? '#0097A7' : '#c2c2c2'"
/>

And put the svg themselves into the svg folder in assets, from where the collector itself generates a sprite from the actual svg`s