How to generate svg files into a sprite so that it can be inserted via html?

Question

css

Good afternoon
What needs to be installed so that the svg files are generated in one sprite and I can insert them in this form into the html code:
Earlier, I installed npm i gulp.spritesmith and prescribed the task:

gulp.task('sprite', function () {
      var spriteData = gulp.src('app/img/icon/*.png').pipe(spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.scss'
      }));
      return spriteData.pipe(gulp.dest('app/sprite/'));
    });

but it only works on png, and I need svg.

Answer 1

I am using gulp svgstore for svg sprites.

var svgstore = require('svgstore');
var rename = require("gulp-rename");

gulp.task('svg-sprite', function(){
  return gulp.src(['dist/img/svg/icon/**/*.svg', '!dist/svg/icon/sprite.svg'])
  .pipe(svgstore({
    inlineSvg: true
  }))
  .pipe(rename('sprite.svg'))
  .pipe(gulp.dest('dist/img/svg/icon'))
});

Next, I insert through svg -> use

<svg>
    <use xlink:href="img/svg/icon/sprite.svg#id_свг_без_формата"></use>
</svg>

Например:

<svg> 
    <use xlink:href="img/svg/icon/sprite.svg#icon-top3"></use>
</svg>

svg id will be the same as the name of the svg file when building the sprite