Как генерировать файлы svg в спрайт чтобы можно было вставлять через html?

Question

[LOLIK777]

Добрый день
Что необходимо установить чтобы файлы svg генерировались в один спрайт и я могла их вставлять в таком виде в html код:

Ранее я устанавливала npm i gulp.spritesmith и прописывала таск:

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/'));
    });

но он работает только на png, а мне надо svg.

Answer 1

[Хороший UI]

Использую gulp svgstore для свг спрайтов.

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'))
});

Далее вставляю через 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>

id свг будет такой же, как и имя svg файла при сборке спрайта