Is it possible to improve my way of working with SVG icons?

Question

css

This is primarily about icons that should respond to events like a mouse click. Now they are all connected as a background image:

background: center no-repeat url(../assets/svg/cross/cross-base.svg);

Accordingly, for each icon there is a separate folder with the necessary styling options:

assets/svg/cross/
  cross-base.svg
  cross-hover.svg
  cross-active.svg
  cross-disabled.svg

Of course, I would like to limit myself to one file for each icon and control the fill property from CSS. However, the only way I see is to write the path to the icons in the HTML template and inject using the same webpack. That is, move connection control from CSS to HTML.

But suddenly there is a more elegant solution that allows you to leave the setting in CSS, because. I think this has more to do with styles than HTML markup? Maybe some kind of collector plugin that injects SVG inside the tag for which the background is set?
Or look towards the sprites?

Answer 1

What options do I know:
1. Use sprites
2. Insert an inline icon and work with its curves, shapes using CSS (as well as with any other entities)
3. Using php, render everything as inline. 4. Do step 3 with js. <img src="image.svg">