-
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 iIf 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/iconsfolder -
Uncomment task
svgSpriteBuild -
Run task
svgSpriteBuild -
Now you have
sprite.svgin/assets/i/spritefolder. By default you havesvg4everybodyscript in your js. Also you have scss file_sprite.scssfor styling sprite. -
Add
svg4everybodyin yourmain.jsfile. For including icons use pug mixin "icon"
$(document).ready(function () {
svg4everybody({});
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent