-
Install node.js and gulp globally
npm install gulp -g
-
Install npm packages. If you have problems in browser-sync install on Windows look here
npm i
If you use link of global packages:
npm install gulp rimraf gulp-pug gulp-sass gulp-autoprefixer gulp-plumber gulp-directory-sync browser-sync gulp-concat gulp-purifycss gulp-uglify gulp-imagemin imagemin-pngquant gulp-csso gulp-sourcemaps gulp-sequence gulp-svg-sprite gulp-svgmin gulp-cheerio gulp-replace gulp-notify -g npm link gulp rimraf gulp-pug gulp-sass gulp-autoprefixer gulp-plumber gulp-directory-sync browser-sync gulp-concat gulp-purifycss gulp-uglify gulp-imagemin imagemin-pngquant gulp-csso gulp-sourcemaps gulp-sequence gulp-svg-sprite gulp-svgmin gulp-cheerio gulp-replace gulp-notify
-
Let's code!
gulp
-
Install packages
npm install gulp-svg-sprite gulp-svgmin gulp-cheerio gulp-replace -g npm link gulp-svg-sprite gulp-svgmin gulp-cheerio gulp-replace
-
Put your icons into
/assets/i/icons
folder -
Uncomment task
svgSpriteBuild
-
Run task
svgSpriteBuild
-
Now you have
sprite.svg
in/assets/i/sprite
folder. By default you havesvg4everybody
script in your js. Also you have scss file_sprite.scss
for styling sprite. -
Add
svg4everybody
in yourmain.js
file. For including icons use pug mixin "icon"
$(document).ready(function () {
svg4everybody({});
});