How to embed svg in vue?

Question

JavaScript

Tell me how can I use icons in vue.js svg so that for example I insert an icon and on click I can change its color through css (or through something else).
What is the best way to insert svg images in this case?
I insert many images simply through the img tag, but with this approach, it cannot be modified later. Inserting all svg code into a component is very cumbersome. I saw that they are inserted through the object tag, but it all looks crooked.
Maybe use some kind of svg loader for webpack here?
I also saw that it is recommended to use sprites or some separate vue components for this.
With all these numerous ways, I'm already confused.
So which one to use ideally for a vue project.
If possible, then with an example of some kind of icon for the button. Thanks in advance.

Answer 1

Regardless of technology stack:
For colorful icons, only 2 technologies will do:
inline svg
svg symbol sprite
- Both have flaws, but work. All other approaches - generally slag.
For single-color svg icons, font generation from icons is suitable.
I'm closer to svg symbol sprite: (svg gradients don't work, some badly saved icons can break the whole sprite)
And it suits me only when I throw icons into a certain folder and it automatically gets into the sprite, that is, I can immediately use it. There are plugins for which you need to import each icon before using them - they are easy to install and configure, but terribly
inconvenient Module for nuxt:
https://github.com/nuxt-community/svg-sprite-module
* May not work with other modules for svg...
Vue cli:
https://github.com/swisnl/vue-cli-plugin-svg- sprite
* Didn't check, but it seems to be what you need

Answer 2

There was a similar question, here , to which the author himself answered so exhaustively that it can be used as a ready-made manual on the topic, and the manual is of a good level of kosher, because xlink in all fields.