SVG icons as backgound?

Question

css

Hello. A simple thing is needed. Embed svg icon as background for use in pseudo-elements. But you still need to do a color change on hover. I did not find any information on how to do this.
Thank you.
Ps and maybe there is something to automate the assembly into a sprite and insert it as a background and with positions for Gulp.

Answer 1

Your salvation is gulp-svg-sprite .
Able to collect sprites in four different modes, there is also a mode for css-background. Generates styles with already set icon coordinates in the sprite. For interactive svg background is not suitable.
I use the symbol mode, everything works like this:

1. currentColorIn the svg icon, write ( fill="currentColor"or stroke="currentColor", depending on what needs to be painted) as the color of the required attribute .
   
2. We collect the sprite, render it on the page. Symbol elements are not displayed until called.
   
3. In the element where the icon is needed, use
   

   <svg>
       <use style="color: rebeccapurple" xlink:href="id_элемента_спрайта"></use>
   </svg>

   
   The color from coloris inherited inside the icon wherever the currentColor. You can have fun with CSS! (transition to help you)
   Cons:
   My gulp , there you will find the configuration gulp-svg-sprite.
   An example of use (social media icons in the upper right corner).

Answer 2

Just solved this issue. Or rather, tried to decide - it is impossible to do it. There are crutches with filters and masks, but they are not supported everywhere, not always applicable, and generally crutches ( article ).
The only option is to inline the svg into the document, but that's also not a trivial task ( SO-1 , SO-2 , SO-3 ).