Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit 2cf37f9530e8167900e9c9bec30aa0ee551b62f6 @outpunk outpunk committed Jan 7, 2015
Showing with 224 additions and 0 deletions.
  1. +13 −0 .editorconfig
  2. +3 −0 .gitignore
  3. +11 −0 .npmignore
  4. +8 −0 Gulpfile.js
  5. +22 −0 LICENSE-MIT
  6. +59 −0 README.md
  7. +63 −0 index.js
  8. +30 −0 package.json
  9. +15 −0 test/index.html
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
@@ -0,0 +1,3 @@
+node_modules
+npm-debug.log
+tmp
@@ -0,0 +1,11 @@
+.git
+.DS_Store
+npm-debug.log
+*.sublime-project
+*.sublime-workspace
+*.todo
+
+Gulpfile.js
+node_modules
+test
+tmp
@@ -0,0 +1,8 @@
+var gulp = require('gulp');
+var icons = require('./index.js');
+
+gulp.task('default', function () {
+ return gulp.src('test/index.html')
+ .pipe(icons())
+ .pipe(gulp.dest('tmp'));
+});
@@ -0,0 +1,22 @@
+Copyright (c) 2015 Alexander Madyankin <alexander@madyankin.name>
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,59 @@
+# gulp-evil-icons
+
+This plugin allows to use [Evil Icons] in your project with Gulp.
+
+[Evil Icons]: http://evil-icons.io
+
+
+<p align="center"><a href="https://evilmartians.com/">
+<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg" alt="Sponsored by Evil Martians" width="236" height="54">
+</a></p>
+
+## Getting Started
+
+If you haven't used [Gulp](http://gulpjs.com) before, be sure to check out
+the [Getting Started](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md) guide.
+Once you're familiar with it, you may install this plugin with this command:
+
+
+## Usage
+
+### Overview
+You have to install the plugin first:
+
+```shell
+npm install gulp-evil-icons --save-dev
+```
+
+In your project's Gulpfile you can use it like so:
+
+```js
+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:
+
+```html
+<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:
+```html
+<link rel="stylesheet" href="../node_modules/evil-icons/assets/css/evil-icons.css">
+```
+
+
@@ -0,0 +1,63 @@
+/*
+ * gulp-evil-icons
+ * https://github.com/outpunk/gulp-evil-icons
+ *
+ * Copyright (c) 2015 Alexander Madyankin
+ * Licensed under the MIT license.
+ */
+
+"use strict";
+
+var through = require('through2');
+var gutil = require('gulp-util');
+var cheerio = require("cheerio");
+var icons = require("evil-icons");
+var PluginError = gutil.PluginError;
+
+
+function iconize(html) {
+ var $ = cheerio.load(html);
+
+ $("body").prepend(icons.sprite);
+
+ $("icon").each(function(i, el){
+ var icon = $(el);
+ var name = icon.attr("name");
+
+ var params = {};
+ params.size = icon.attr("size");
+ params.class = icon.attr("class");
+
+ var html = icons.icon(name, params);
+
+ $(this).replaceWith(html);
+ });
+
+ return $.html();
+}
+
+
+function gulpEvilIcons() {
+ return through.obj(function(file, enc, cb) {
+ if (file.isNull()) {
+ cb(null, file);
+ }
+
+ var html = iconize(file.contents);
+
+ if (file.isBuffer()) {
+ file.contents = new Buffer(html);
+ }
+
+ if (file.isStream()) {
+ this.emit("error", new PluginError("gulp-evil-icons", "Streaming not supported"));
+ return cb();
+ }
+
+ this.push(file);
+ cb(null, file);
+ });
+};
+
+
+module.exports = gulpEvilIcons;
@@ -0,0 +1,30 @@
+{
+ "name": "gulp-evil-icons",
+ "version": "0.1.0",
+ "description": "Gulp plugin to use Evil Icons in your project",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git://github.com/outpunk/gulp-evil-icons.git"
+ },
+ "keywords": [
+ "icons",
+ "SVG",
+ "gulpplugin"
+ ],
+ "author": "Alexander Madyankin <alexander@madyankin.name>",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/outpunk/gulp-evil-icons/issues"
+ },
+ "homepage": "https://github.com/outpunk/gulp-evil-icons",
+ "dependencies": {
+ "cheerio": "^0.18.0",
+ "evil-icons": "^1.4.0",
+ "gulp-util": "^3.0.1",
+ "through2": "^0.6.3"
+ }
+}
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Evil Icons</title>
+ <link rel="stylesheet" href="../node_modules/evil-icons/assets/css/evil-icons.css">
+</head>
+<body>
+
+ <icon name="ei-archive" />
+ <icon name="ei-chart" size="s" />
+ <icon name="ei-check" size="m" />
+ <icon name="ei-cart" size="l" class="foo" />
+
+</body>
+</html>

0 comments on commit 2cf37f9

Please sign in to comment.