Создание SVG sprite с помощью gulp

Для начала необходимо, что-бы был установлен gulp (если он не установлен, то устанавливаем с помощью npm install gulp)

Далее устанавливаем модуль npm install --save-dev gulp-svg-sprite

описание модуля по ссылке www.npmjs.com/package/gulp-svg-sprite

Далее в файле gulpfile.js создаем task в котором делаем необходимые настройки модуля, про которые можно прочесть перейдя по ссылке www.npmjs.com/package/svg-sprite

модуль имеет множество настроек и несколько разных модов

В данном случае нас интересует создание спрайта, который можно использовать как в HTML, так и с помощью фоновой картинки в CSS

для этого нам потребуется mode: stack

добавляем код в файл gulpfile.js

//svg sprite
var svgSprite = require('gulp-svg-sprite');

gulp.task('svgSprite', function () {
    return gulp.src('app/design/frontend/Magento/newizze/web/sprite/*.svg') // svg files for sprite
        .pipe(svgSprite({
                mode: {
                    stack: {
                        sprite: "../sprite.svg"  //sprite file name
                    }
                },
            }
        ))
        .pipe(gulp.dest('app/design/frontend/Magento/newizze/web/images/'));
});

Чтобы запустить созданную задачу необходимо в консоле прописать gulp svgSprite

если задача успешно отработала, то увидим сообщение в консоле Finished 'svgSprite' after 884 ms

И теперь можно проверять наличие созданного файла с названием, которое мы задали в настройках, в данном случае sprite.svg

он должен находиться по указанному нами пути app/design/frontend/Magento/vendor/web/images/

В спрайт добавляются все иконки находящиеся в каталоге, который мы указали в настройках, в данном случае app/design/frontend/Magento/vendor/web/sprite/*.svg

и каждой иконке присваивается id который соответствует имени файла (id так же можно менять в настройках, это описано в документации)

Чтобы обратиться к нужной иконке из спрайта необходимо к имени файла sprite.svg дописать id иконки, например sprite.svg#shopping-cart

Теперь можно использовать наш спрайт, это можно делать как с помощью HTML так и с помощью CSS, используя background

мы можем менять ширину и высоту иконок с помощью селекторов CSS width и height

если мы добавим спрайт в HTML с помощью svg, то можем менять и цвет иконок с помощью селектора CSS fill

несколько примеров использования спрайта:

с помощью HTML:

<img src="sprite.svg#shopping-cart">

//или

<svg class="img">

    <use xlink:href="sprite.svg#shopping-cart "></use>

</svg>

с помощью CSS background

.shopping-cart {

      background: url(sprite.svg#shopping-cart) no-repeat; 
  }

Автор: Леонид Якубович

Источник