How to generate svg sprite (view data:image/svg+xml) in gulp for css (scss)?

Question

css

Friends, hello everyone!
I use svg in css (scss) like this:

.class {
   background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22ht...') center no-repeat;
   background-size: contain;
   height: 30px;
   width: 30px;
}

I like this approach because there is no svg file as such (no extra request), but the most important thing is that I can change the height and width properties and the icon will scale.
At the moment the problem is that I have to process the svg file manually, i.e. it is clear that you will need to put the icon in order in any case (for example, set a color), but then: open it in the editor, copy the code, run it through the Decoder / Encoder URL and only then paste it into css, it takes a lot of time. I see this approach of using an svg sprite on a lot of sites (and quite serious ones), even elementary on this one , and I think they are unlikely to do such work manually, like me.
I also use an svg sprite in html, and then I call it through use, but I don’t like this approach, I prefer css.
At the moment, I have looked at the gulp plugin gulp-svg-sprite, but I can’t configure something for use in the form described above.
Maybe someone knows other plugins that allow this to be done, or maybe the same svg-sprite still allows you to do this, but I'm just inattentive (read hand-ass)?
Thank you!

Answer 1

Yes, great approach. Especially for small icons. Partially, this https://codepen.io/alexcss/pen/aVLjLx
can help solve the issue. There is a scss mixin that automatically decodes SVG code into a background image. This method works everywhere. According to this article https://codepen.io/tigt/post/optimizing-svgs-in-da... not all URL Decoders encode SVG appropriately. And automatically substituting the source of svg files there, for example from a folder, can be configured via gulp.