Рубрика «css» - 40

Для начала необходимо, что-бы был установлен 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/'));
});

Читать полностью »