Sprite svg - how to cook?

Question

css

Good afternoon.
Increasingly I see the use of svg sprites. I ran through them and read several articles. There are a lot of questions left. Especially in building this case with gulp sass and for example the gulp-svg-sprites plugin .
1. The design has icons of different sizes, different colors. hover effects and the like. The question is how to cook everything? For some reason, I got the impression that all icons should be the same size (for example, 16x16 px ). How then to be when the same icon is required in different sizes? We are talking about a sprite with an svg background image. How to catch hover effects?
2. Is there a positive experience with the gulp-svg-sprites plugin and what are the pitfalls to be aware of? Can anyone share their version and will have something to compare?
3. Who made separate sprites for different types of icons using gulp-svg-sprites, for example, separation into interface and info graphics. For example icon-ui-sprite.svg and icon-services.svg.
4. How and what is the best way to optimize svg sprites?

Answer 1

Most recently, I answered questions
about generating multiple sprites: Ways to generate multiple sprites?
and about the approach to storing graphics in general: Fonts or images for icons, which is better?
Listen to how they do it in 2gis: 2014.codefest.ru/lecture/677 (although now, apparently, ase64 is being abandoned)
For your questions:
1. Unfortunately, using a sprite, we are strictly tied to the size of the icon. Those. if we have the same icon 16*16 and 32*32, we'll have to add both to the sprite. If we have gray by default and blue by hover, we will have to add both.
Fonts solve this problem (but with their own, in my opinion, critical shortcomings) and svg symbols (there are also disadvantages, I plan to start implementing them next year).
2. Yes, https://github.com/jkphl/gulp-svg-sprite - everything is positive, powerful thing. Of course, you will need to get confused with your style file template so that everything is beautiful.
There is a pitfall with sprites in general. When done, try zooming in on the page. Icons at some levels will be "cut off". Google about this problem.
3. Answer in first paragraph
4. Using https://www.npmjs.com/package/gulp-imagemin to compress all graphics including svg