Gulp spritesmith как вывести иконки напрямую в html?

Question

[Anton]

Не пойму как вывести напрямую в html иконки из файла sprites.sass не писав для каждой иконки код в стилях, может быть через цикл, но не могу придумать как(((

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

[ⓒⓢⓢ]

Что-то такое? (2 картинки mail и setting +ховер к ним)

.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;
}

Файл gulpfile.js Подключаем шаблон в опцию spritesmith`а (cssTemplate)

var spriteData = gulp.src(dir_app + path.src.imgSprites) /*выберем откуда брать изображения для объединения в спрайт */
   .pipe(sprites({
      retinaSrcFilter : [dir_app + path.src.imgSprites2x],
      retinaImgName   : '[e-mail]',
      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

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