Gulp spritesmith how to display icons directly in html?

Question

gulp.js

I don’t understand how to display icons directly in html from the sprites.sass file without writing code in styles for each icon, maybe through a loop, but I can’t figure out how (((

gulp.task('sprite-create', ['sprite-clean'], function () {

  var spriteData = gulp.src('app/img/icons/*.png')
  .pipe(spritesmith({
    imgName: 'sprites.png',
    cssName: '../sass/_sprites.sass',
    padding: 2,
    cssVarMap: function (sprite) {
    	sprite.name = 'ico--' + sprite.name;
    },
    imgPath: 'app/img/'
  }));

Answer 1

Something like this? (2 pictures mail and setting + hover to them)

.i-mail {
  background-position: 0px 0px;
  width: 256px;
  height: 256px;
}
 .i-mail_hover {
  background-position: -256px 0px;
  width: 256px;
  height: 256px;
}
 .i-setting {
  background-position: 0px -256px;
  width: 256px;
  height: 256px;
}
 .i-setting_hover {
  background-position: -256px -256px;
  width: 256px;
  height: 256px;
}

File gulpfile.js We connect the template to the spritesmith's option ( cssTemplate )

var spriteData = gulp.src(dir_app + path.src.imgSprites) /*выберем откуда брать изображения для объединения в спрайт */
   .pipe(sprites({
      retinaSrcFilter : [dir_app + path.src.imgSprites2x],
      retinaImgName   : '[email protected]',
      imgName         : 'sprite.png', /* имя спрайтового изображения */
      cssName         : '_sprites.scss', /* имя стиля где храним позиции изображений в спрайте */
      cssTemplate : './app/css/sprites.template.handlebars',
      cssVarMap       : function (sprite)
      {
         /* имя каждого спрайта будет состоять из имени файла и конструкции 'i-' в начале имени */
         sprite.name = 'i-' + sprite.name;
      }
}));
/* путь, куда сохраняем картинку */
spriteData.img.pipe(gulp.dest(dir_app + "/asset/css/"));
   
   /* путь, куда сохраняем стили */
spriteData.css.pipe(gulp.dest(dir_app + "/css/"));

sprites.template.handlebars file

{{#items}}
.{{name}} {
  background-position: {{px.offset_x}} {{px.offset_y}};
  width: {{px.width}};
  height: {{px.height}};
}
{{/items}}