A basic HTML template, SASS & JS ready.

npm install

rm -rf .git
git init
git add .
git commit -m "first commit"
git branch -M main

gulp

Usually the server starts at : http://localhost:3001/

Individual icon files are placed in the /icons/ folder. The name of each file, prefixed with icon-, sets the id of the associated <symbol>.

To generate the sprite (/img/icons-sprite.svg) :

gulp svg

Sprite's generation is included in the default task : adding a SVG file in the /icons/ folder leads to a brand new cadillac sprite.

GitHub Repository

The following options are set automatically based on file data:

• id attribute of the <symbol> element is set to the name of corresponding file
• result filename is the name of base directory of the first file.

If your workflow is different, please use gulp-rename to rename sources or result.

The only available option is:

• inlineSvg — output only <svg> element without <?xml ?> and DOCTYPE to use inline, default: false.

• GitHub Repository

Note Relies on SVGO, which is globally installed.

Thanks to gulp-cheerio

Cheerio is an implementation of jQuery for the server, it makes it easy to remove SVG attributes :

$("[fill]").removeAttr("fill");

NB: It's also possible to replace the value of every fill attribute with currentColor. Thus the fill color of the path is controlled via CSS with the color property of the parent svg.

Installed plugins :

• @mr-hope/gulp-sass (fully compatible with Dart Sass)
• gulp-rename
• gulp-autoprefixer
• gulp-sourcemaps
• browser-sync