├── .gitignore ├── LICENSE ├── README.md ├── example ├── .gitignore ├── config.js ├── default-css.hbs ├── preview-custom.hbs ├── preview.hbs └── svg │ ├── burger.svg │ ├── chevron.svg │ ├── cloud-sync.svg │ ├── delete.svg │ ├── disc-arrow.svg │ ├── disc-plus.svg │ ├── eye.svg │ ├── flag.svg │ ├── hotdiggity.svg │ ├── kswiss.svg │ ├── map.svg │ ├── marker.svg │ ├── menu.svg │ ├── minus.svg │ ├── mountain.svg │ ├── piggy.svg │ ├── plus.svg │ └── search.svg ├── gulpfile.js ├── package.json └── tasks └── gulpicon.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) John Bender 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | :warning: This project is archived and the repository is no longer maintained. 2 | 3 | # Gulpicon 4 | 5 | A [gulp](https://github.com/gulpjs/gulp) task wrapper for [grunticon-lib](https://github.com/filamentgroup/grunticon-lib). 6 | 7 | ## Install 8 | 9 | To install to your project and save the dependency in `package.json`: 10 | 11 | ``` 12 | npm install -s gulpicon 13 | ``` 14 | 15 | ## Usage 16 | 17 | ```javascript 18 | var glob = require("glob"); 19 | var gulp = require("gulp"); 20 | var gulpicon = require("gulpicon/tasks/gulpicon"); 21 | 22 | // grab the config, tack on the output destination 23 | var config = require("./example/config.js"); 24 | config.dest = "example/output"; 25 | 26 | // grab the file paths 27 | var files = glob.sync("example/svg/*.svg"); 28 | 29 | // set up the gulp task 30 | gulp.task("icons", gulpicon(files, config)); 31 | ``` 32 | 33 | ## Sample test 34 | 35 | ``` 36 | # Checkout the project 37 | git clone git@github.com:filamentgroup/gulpicon.git 38 | cd gulpicon 39 | 40 | # Run the sample 41 | npm install 42 | npx gulp icons 43 | ``` 44 | 45 | Output will now be in `example/output/`. 46 | 47 | ## TODO 48 | 49 | 1. Move to plugin/operation on stream of files, requires alterations to `grunticon-lib`. 50 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | output 2 | -------------------------------------------------------------------------------- /example/config.js: -------------------------------------------------------------------------------- 1 | var path = require( "path" ); 2 | 3 | module.exports = { 4 | // CSS filenames 5 | datasvgcss: "icons.data.svg.css", 6 | datapngcss: "icons.data.png.css", 7 | urlpngcss: "icons.fallback.css", 8 | 9 | // preview HTML filename 10 | previewhtml: "preview.html", 11 | 12 | // grunticon loader code snippet filename 13 | loadersnippet: "grunticon.loader.js", 14 | 15 | // Include loader code for SVG markup embedding 16 | enhanceSVG: true, 17 | 18 | // Make markup embedding work across domains (if CSS hosted externally) 19 | corsEmbed: false, 20 | 21 | // folder name (within dest) for png output 22 | pngfolder: "png", 23 | 24 | // prefix for CSS classnames 25 | cssprefix: ".icon-", 26 | 27 | defaultWidth: "300px", 28 | defaultHeight: "200px", 29 | 30 | // define vars that can be used in filenames if desirable, 31 | // like foo.colors-primary-secondary.svg 32 | colors: { 33 | primary: "red", 34 | secondary: "#666" 35 | }, 36 | 37 | dynamicColorOnly: true, 38 | 39 | // css file path prefix 40 | // this defaults to "/" and will be placed before the "dest" path 41 | // when stylesheets are loaded. It allows root-relative referencing 42 | // of the CSS. If you don't want a prefix path, set to to "" 43 | cssbasepath: "/", 44 | customselectors: { 45 | "cat" : ["#el-gato"], 46 | "gummy-bears-2" : ["nav li a.deadly-bears:before"] 47 | }, 48 | 49 | template: path.join( __dirname, "default-css.hbs" ), 50 | previewTemplate: path.join( __dirname, "preview-custom.hbs" ), 51 | 52 | compressPNG: true 53 | }; 54 | -------------------------------------------------------------------------------- /example/default-css.hbs: -------------------------------------------------------------------------------- 1 | {{#each customselectors}}{{this}},{{/each}} 2 | {{prefix}}{{name}} { 3 | background-image: url('{{datauri}}'); 4 | background-repeat: no-repeat; 5 | } 6 | -------------------------------------------------------------------------------- /example/preview-custom.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icons Preview! 5 | 6 | 13 | 19 | 20 | {{/with}} 21 | 22 | 23 | 24 |

CUSTOM PREVIEW - you can change this in the previewTemplate option

25 | {{#each icons}} 26 | {{#with this}} 27 | 
{{prefix}}{{name}}:
28 | {{/with}} 29 | {{/each}} 30 | 31 |

Embedded SVG option

32 |

(The data-grunticon-embed attribute tells grunticon to inject SVG inline):

33 | 34 | 
icon-burger:
35 | 36 | 56 | 57 | 
icon-burger (styled variation):
58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /example/preview.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icons Preview! 5 | 6 | 13 | 19 | 20 | {{/with}} 21 | 22 | 23 | 24 |

PREVIEW - you can change this in the previewTemplate option

25 | {{#each icons}} 26 | {{#with this}} 27 | 
{{prefix}}{{name}}:
28 | {{/with}} 29 | {{/each}} 30 | 31 | 32 | -------------------------------------------------------------------------------- /example/svg/burger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 10 | 11 | 14 | 15 | 16 | 18 | 19 | 21 | 22 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /example/svg/chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /example/svg/cloud-sync.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /example/svg/delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /example/svg/disc-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example/svg/disc-plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example/svg/eye.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/svg/flag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /example/svg/hotdiggity.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 11 | 12 | 14 | 16 | 18 | 23 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/svg/kswiss.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/svg/map.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/svg/marker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /example/svg/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /example/svg/minus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /example/svg/mountain.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /example/svg/piggy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 13 | 14 | -------------------------------------------------------------------------------- /example/svg/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/svg/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var glob = require("glob"); 2 | var gulp = require("gulp"); 3 | var gulpicon = require("./tasks/gulpicon"); 4 | 5 | // grab the config, tack on the output destination 6 | var config = require("./example/config.js"); 7 | config.dest = "example/output"; 8 | 9 | // grab the file paths 10 | var files = glob.sync("example/svg/*.svg"); 11 | 12 | // set up the gulp task 13 | gulp.task("icons", gulpicon(files, config)); 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulpicon", 3 | "version": "1.2.1", 4 | "description": "A gulp task wrapper for grunticon-lib.", 5 | "license": "MIT", 6 | "repository": "filamentgroup/gulpicon", 7 | "homepage": "https://github.com/filamentgroup/gulpicong", 8 | "author": { 9 | "name": "John Bender", 10 | "email": "john.m.bender@gmail.com", 11 | "url": "johnbender.us" 12 | }, 13 | "engines": { 14 | "node": ">=0.10.0" 15 | }, 16 | "scripts": { 17 | "test": "mocha" 18 | }, 19 | "keywords": [ 20 | "gulpplugin" 21 | ], 22 | "dependencies": { 23 | "gulp-util": "^3.0.5", 24 | "through2": "^0.6.5", 25 | "grunticon-lib": "^1.2.1" 26 | }, 27 | "devDependencies": { 28 | "mocha": "*", 29 | "glob": "^5.0.10", 30 | "gulp": "^3.9.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /tasks/gulpicon.js: -------------------------------------------------------------------------------- 1 | /*global require:true*/ 2 | var gutil = require('gulp-util'); 3 | var Grunticon = require( 'grunticon-lib' ); 4 | 5 | module.exports = function( files, config ) { 6 | "use strict"; 7 | 8 | return function(callback) { 9 | 10 | // get the config 11 | config.logger = { 12 | verbose: config.verbose || function() {}, 13 | fatal: function() {}, 14 | ok: function() {} 15 | }; 16 | 17 | // just a quick starting message 18 | gutil.log( "Look, it's a gulpicon!" ); 19 | 20 | files = files.filter( function( file ){ 21 | return file.match( /png|svg/ ); 22 | }); 23 | 24 | if( files.length === 0 ){ 25 | gutil.log( "Grunticon has no files to read!" ); 26 | callback( false ); 27 | return; 28 | } 29 | 30 | var output = config.dest; 31 | 32 | if( !output || output && output === "" ){ 33 | gutil.log("The destination must be a directory"); 34 | callback( false ); 35 | } 36 | 37 | var gicon = new Grunticon(files, config.dest, config); 38 | 39 | gicon.process( callback ); 40 | }; 41 | }; 42 | --------------------------------------------------------------------------------