pkdevboxy / gulp-evil-icons

Gulp plugin to use Evil Icons in your project

gulp-evil-icons

This plugin allows to use Evil Icons in your project with Gulp.

Usage

Overview

If you haven't used Gulp before, be sure to check out the Getting Started guide. Once you're familiar with it, you may install the plugin with this command:

npm install gulp-evil-icons --save-dev

In your project's Gulpfile you can use it like so:

var evilIcons = require("gulp-evil-icons");

gulp.task('default', function () {
  return gulp.src('src/index.html')
    .pipe(evilIcons())
    .pipe(gulp.dest('build'));
});

Using icons

Once you have added the plugin section to your Gulpfile, you can use the icons in your html with the icon tag:

<icon name="ei-archive" />
<icon name="ei-chart" size="s" />
<icon name="ei-check" size="m" />
<icon name="ei-cart" size="l" class="foo" />

The sprite will be added to your html automatically, and the icon tags will be replaced with actual SVG code.

The only thing you have to add to your code explicitly is the stylesheet:

<link rel="stylesheet" href="./node_modules/gulp-evil-icons/node_modules/evil-icons/assets/evil-icons.css">