├── .gitignore ├── .jenkins ├── .jshintrc ├── .npmignore ├── .repo-rt ├── .travis.yml ├── CONTRIBUTING.md ├── Gruntfile.js ├── ISSUE_TEMPLATE.md ├── LICENSE ├── README.md ├── Vagrantfile ├── example ├── default-css.hbs ├── output │ ├── grunticon.loader.js │ ├── icons.data.png.css │ ├── icons.data.svg.css │ ├── icons.fallback.css │ ├── png │ │ ├── bear-2.png │ │ ├── bear-primary.png │ │ ├── bear-secondary.png │ │ ├── burger.png │ │ ├── chevron.png │ │ ├── cloud-sync.png │ │ ├── delete.png │ │ ├── disc-arrow.png │ │ ├── disc-plus.png │ │ ├── eye.png │ │ ├── flag.png │ │ ├── hotdiggity.png │ │ ├── kswiss.png │ │ ├── map.png │ │ ├── marker.png │ │ ├── menu.png │ │ ├── minus.png │ │ ├── mountain.png │ │ ├── over-ie8-data-uri-limit.png │ │ ├── piggy.png │ │ ├── plus.png │ │ └── search.png │ └── preview.html ├── preview-custom.hbs ├── preview.hbs ├── source-error-file │ └── test-swp-file.svg.swp ├── source │ ├── .foo │ ├── burger.svg │ ├── chevron.svg │ ├── cloud-sync.svg │ ├── colors │ │ └── bear.colors-primary-secondary-BBBBBB.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 │ ├── over-ie8-data-uri-limit.png │ ├── piggy.svg │ ├── plus.svg │ └── search.svg └── svgs │ ├── 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 ├── package.json ├── site ├── .htaccess ├── gruntfile.js ├── grunticon │ ├── grunticon.loader.js │ ├── icons.data.png.css │ ├── icons.data.svg.css │ ├── icons.fallback.css │ ├── png │ │ ├── ad.png │ │ ├── bill.png │ │ ├── bowling.png │ │ ├── browsers.png │ │ ├── button.png │ │ ├── buzzer.png │ │ ├── calculator.png │ │ ├── close.png │ │ ├── converse.png │ │ ├── conveyor.png │ │ ├── demoltion.png │ │ ├── fg-logo.png │ │ ├── fire extinguisher.png │ │ ├── helmet.png │ │ ├── icecream.png │ │ ├── lamp.png │ │ ├── logo.png │ │ ├── luggage.png │ │ ├── majestic.png │ │ ├── microscope.png │ │ ├── npm-logo.png │ │ ├── passport.png │ │ ├── plane.png │ │ ├── plus.png │ │ ├── presentation.png │ │ ├── server.png │ │ ├── skate.png │ │ ├── smart watch.png │ │ ├── switcher.png │ │ ├── theatre.png │ │ ├── tie.png │ │ ├── top.png │ │ ├── tower .png │ │ ├── turntable.png │ │ ├── umbrella.png │ │ ├── vespa.png │ │ ├── wacom.png │ │ ├── workspace.png │ │ ├── wrench.png │ │ └── x.png │ └── preview.html ├── img │ └── browsers.png ├── index.html ├── package.json └── src │ ├── css │ ├── all.css │ ├── arvo-regular-webfont.ttf │ ├── arvo-regular-webfont.woff │ ├── arvo-regular-webfont.woff2 │ ├── pacifico-webfont.ttf │ ├── pacifico-webfont.woff │ └── pacifico-webfont.woff2 │ ├── js │ ├── foot.js │ └── head.js │ └── svg │ ├── browsers.svg │ ├── converse.svg │ ├── conveyor.svg │ ├── fg-logo.svg │ ├── lamp.svg │ ├── logo.svg │ ├── majestic.svg │ ├── npm-logo.svg │ ├── plane.svg │ ├── plus.svg │ ├── reserve │ ├── ad.svg │ ├── bill.svg │ ├── bowling.svg │ ├── button.svg │ ├── buzzer.svg │ ├── calculator.svg │ ├── demoltion.svg │ ├── fire extinguisher.svg │ ├── helmet.svg │ ├── icecream.svg │ ├── luggage.svg │ ├── microscope.svg │ ├── passport.svg │ ├── presentation.svg │ ├── server.svg │ ├── smart watch.svg │ ├── switcher.svg │ ├── theatre.svg │ ├── tie.svg │ ├── turntable.svg │ ├── umbrella.svg │ ├── wacom.svg │ ├── workspace.svg │ └── wrench.svg │ ├── skate.svg │ ├── top.svg │ ├── tower .svg │ ├── vespa.svg │ └── x.svg └── tasks └── grunticon.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | tmp 4 | .DS_Store 5 | .vagrant 6 | -------------------------------------------------------------------------------- /.jenkins: -------------------------------------------------------------------------------- 1 | user: NONE 2 | subdir: site 3 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqeqeq": true, 4 | "immed": true, 5 | "latedef": true, 6 | "newcap": true, 7 | "noarg": true, 8 | "sub": true, 9 | "undef": true, 10 | "unused": true, 11 | "boss": true, 12 | "eqnull": true, 13 | "node": true, 14 | "globals": { 15 | "window": true, 16 | "document": true, 17 | "navigator": true, 18 | "loadCSS": true, 19 | "onloadCSS": true, 20 | "grunticon": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | .vagrant 3 | Vagrantfile 4 | -------------------------------------------------------------------------------- /.repo-rt: -------------------------------------------------------------------------------- 1 | bower.json -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 6 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Grunticon 2 | 3 | Contributions are appreciated. In order for us to consider including a contribution, it does have to meet a few criteria: 4 | 5 | * Code is specific to one issue (eg. feature, extension or bug) 6 | * Code is formatted according to JavaScript Style Guide. 7 | * Code has full test coverage and all tests pass. 8 | 9 | ## Code to an Issue 10 | 11 | Use a separate git branch for each contribution. Give the branch a meaningful name. 12 | When you are contributing a new extensions use the name of this extension, like `dom-toggleclass`. 13 | Otherwise give it a descriptive name like `doc-generator` or reference a specific issue like `issues-12`. 14 | When the issue is resolved create a pull request to allow us to review and accept your contribution. 15 | 16 | ## JavaScript Style Guide 17 | 18 | Code should be formatted according to the [jQuery JavaScript Style Guide](http://contribute.jquery.org/style-guide/). 19 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * grunticon 3 | * https://github.com/filamentgroup/grunticon 4 | * 5 | * Copyright (c) 2012 Scott Jehl 6 | * Licensed under the MIT license. 7 | */ 8 | 9 | /*global __dirname:true*/ 10 | /*global require:true*/ 11 | module.exports = function(grunt) { 12 | "use strict"; 13 | 14 | var path = require( "path" ); 15 | 16 | // Project configuration. 17 | grunt.initConfig({ 18 | pkg: grunt.file.readJSON('package.json'), 19 | watch: { 20 | files: '', 21 | tasks: 'default' 22 | }, 23 | svgmin: { 24 | dist: { 25 | files: [{ 26 | expand: true, 27 | cwd: 'example/svgs', 28 | src: ['*.svg'], 29 | dest: 'example/source' 30 | }] 31 | } 32 | }, 33 | grunticon: { 34 | foo: { 35 | files: [{ 36 | expand: true, 37 | cwd: 'example/source', 38 | src: ['**/*.svg', '**/*.png'], 39 | dest: "example/output" 40 | }], 41 | options: { 42 | 43 | // CSS filenames 44 | datasvgcss: "icons.data.svg.css", 45 | datapngcss: "icons.data.png.css", 46 | urlpngcss: "icons.fallback.css", 47 | 48 | // preview HTML filename 49 | previewhtml: "preview.html", 50 | 51 | // grunticon loader code snippet filename 52 | loadersnippet: "grunticon.loader.js", 53 | 54 | // Include loader code for SVG markup embedding 55 | enhanceSVG: true, 56 | 57 | // Make markup embedding work across domains (if CSS hosted externally) 58 | corsEmbed: false, 59 | 60 | // folder name (within dest) for png output 61 | pngfolder: "png", 62 | 63 | // prefix for CSS classnames 64 | cssprefix: ".icon-", 65 | 66 | defaultWidth: "300px", 67 | defaultHeight: "200px", 68 | 69 | // define vars that can be used in filenames if desirable, like foo.colors-primary-secondary.svg 70 | colors: { 71 | primary: "red", 72 | secondary: "#666" 73 | }, 74 | 75 | dynamicColorOnly: true, 76 | 77 | // css file path prefix - this defaults to "/" and will be placed before the "dest" path when stylesheets are loaded. 78 | // This allows root-relative referencing of the CSS. If you don't want a prefix path, set to to "" 79 | cssbasepath: "/", 80 | customselectors: { 81 | "cat" : ["#el-gato"], 82 | "gummy-bears-2" : ["nav li a.deadly-bears:before"] 83 | }, 84 | 85 | template: path.join( __dirname, "example", "default-css.hbs" ), 86 | previewTemplate: path.join( __dirname, "example", "preview-custom.hbs" ), 87 | 88 | compressPNG: true 89 | 90 | } 91 | } 92 | }, 93 | jshint: { 94 | all: [ 95 | 'Gruntfile.js', 96 | 'tasks/**/*.js' 97 | ], 98 | options: { 99 | jshintrc: '.jshintrc' 100 | } 101 | }, 102 | 103 | // Before generating any new files, remove any previously-created files. 104 | clean: { 105 | tests: ['tmp'] 106 | } 107 | }); 108 | 109 | // Load local tasks. 110 | grunt.loadTasks('tasks'); 111 | 112 | grunt.loadNpmTasks( 'grunt-contrib-jshint' ); 113 | grunt.loadNpmTasks( 'grunt-svgmin' ); 114 | 115 | // Default task. 116 | grunt.registerTask('skip-tests', ['jshint', 'grunticon:foo']); 117 | grunt.registerTask('travis', ['jshint', 'svgmin', 'grunticon:foo']); 118 | grunt.registerTask('default', ['travis']); 119 | grunt.registerTask('stage', ['default']); 120 | 121 | }; 122 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Please include the following information with your issue: 2 | 3 | - [] Detailed description 4 | - [] Step to reproduce 5 | - [] Expected outcome 6 | - [] Actual outcome 7 | - [] Operating system 8 | - [] `grunticon` version 9 | - [] configuration object provided in configuration or otherwise (e.g. `Gruntfile.js`) 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2012 Scott Jehl 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /Vagrantfile: -------------------------------------------------------------------------------- 1 | # -*- mode: ruby -*- 2 | # vi: set ft=ruby : 3 | 4 | # Vagrantfile API/syntax version. Don't touch unless you know what you're doing! 5 | VAGRANTFILE_API_VERSION = "2" 6 | 7 | Vagrant.configure(VAGRANTFILE_API_VERSION) do |config| 8 | config.vm.box = "precise64" 9 | config.vm.box_url = "http://files.vagrantup.com/precise64.box" 10 | 11 | config.vm.network "private_network", ip: "33.33.33.10" 12 | config.vm.network "forwarded_port", guest: 80, host: 4567 13 | 14 | config.vm.provision(:shell, :inline => <<-CMD) 15 | # exit on error 16 | set -e 17 | 18 | echo "Installing node and deps ..." 19 | if ! which node; then 20 | apt-get update 21 | apt-get install -y build-essential 22 | apt-get install -y python-software-properties 23 | add-apt-repository ppa:chris-lea/node.js 24 | apt-get update 25 | apt-get install -y nodejs 26 | fi 27 | apt-get install -y vim 28 | 29 | CMD 30 | 31 | config.vm.provision(:shell, :inline => "cd /vagrant && npm install && npm test") 32 | end 33 | -------------------------------------------------------------------------------- /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/output/grunticon.loader.js: -------------------------------------------------------------------------------- 1 | /*! grunt-grunticon Stylesheet Loader - v2.1.6 | https://github.com/filamentgroup/grunticon | (c) 2015 Scott Jehl, Filament Group, Inc. | MIT license. */ 2 | 3 | !function(){function e(e,t){function n(){!o&&t&&(o=!0,t.call(e))}var o;e.addEventListener&&e.addEventListener("load",n),e.attachEvent&&e.attachEvent("onload",n),"isApplicationInstalled"in navigator&&"onloadcssdefined"in e&&e.onloadcssdefined(n)}!function(e){"use strict";var t=function(t,n,o){function r(e){if(c.body)return e();setTimeout(function(){r(e)})}function a(){d.addEventListener&&d.removeEventListener("load",a),d.media=o||"all"}var i,c=e.document,d=c.createElement("link");if(n)i=n;else{var l=(c.body||c.getElementsByTagName("head")[0]).childNodes;i=l[l.length-1]}var s=c.styleSheets;d.rel="stylesheet",d.href=t,d.media="only x",r(function(){i.parentNode.insertBefore(d,n?i:i.nextSibling)});var u=function(e){for(var t=d.href,n=s.length;n--;)if(s[n].href===t)return e();setTimeout(function(){u(e)})};return d.addEventListener&&d.addEventListener("load",a),d.onloadcssdefined=u,u(a),d};"undefined"!=typeof exports?exports.loadCSS=t:e.loadCSS=t}("undefined"!=typeof global?global:this),function(t){var n=function(o,r){"use strict";if(o&&3===o.length){var a=t.navigator,i=t.document,c=t.Image,d=!(!i.createElementNS||!i.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!i.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||t.opera&&-1===a.userAgent.indexOf("Chrome")||-1!==a.userAgent.indexOf("Series40")),l=new c;l.onerror=function(){n.method="png",n.href=o[2],loadCSS(o[2])},l.onload=function(){var t=1===l.width&&1===l.height,a=o[t&&d?0:t?1:2];n.method=t&&d?"svg":t?"datapng":"png",n.href=a,e(loadCSS(a),r)},l.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",i.documentElement.className+=" grunticon"}};n.loadCSS=loadCSS,n.onloadCSS=e,t.grunticon=n}(this),function(e,t){"use strict";var n,o=t.document,r=function(e){if(o.attachEvent?"complete"===o.readyState:"loading"!==o.readyState)e();else{var t=!1;o.addEventListener("readystatechange",function(){t||(t=!0,e())},!1)}},a=function(e){return t.document.querySelector('link[href$="'+e+'"]')},i=function(e,t){if(n&&!t)return n;n={};var o,r,a,i,c,d;if(!(o=e.sheet))return n;r=o.cssRules?o.cssRules:o.rules;for(var l=0;l 2 | 3 | 4 | Icons Preview! 5 | 6 | 13 | 20 | 21 | 22 | 23 | 24 |

CUSTOM PREVIEW - you can change this in the previewTemplate option

25 | 
.icon-bear-2:
26 | 
.icon-bear-primary:
27 | 
.icon-bear-secondary:
28 | 
.icon-burger:
29 | 
.icon-chevron:
30 | 
.icon-cloud-sync:
31 | 
.icon-delete:
32 | 
.icon-disc-arrow:
33 | 
.icon-disc-plus:
34 | 
.icon-eye:
35 | 
.icon-flag:
36 | 
.icon-hotdiggity:
37 | 
.icon-kswiss:
38 | 
.icon-map:
39 | 
.icon-marker:
40 | 
.icon-menu:
41 | 
.icon-minus:
42 | 
.icon-mountain:
43 | 
.icon-over-ie8-data-uri-limit:
44 | 
.icon-piggy:
45 | 
.icon-plus:
46 | 
.icon-search:
47 | 48 |

Embedded SVG option

49 |

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

50 | 51 | 
icon-burger:
52 | 53 | 73 | 74 | 
icon-burger (styled variation):
75 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /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/source-error-file/test-swp-file.svg.swp: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /example/source/.foo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/example/source/.foo -------------------------------------------------------------------------------- /example/source/burger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/chevron.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/cloud-sync.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/colors/bear.colors-primary-secondary-BBBBBB.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/disc-arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/disc-plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/eye.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/flag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/hotdiggity.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/kswiss.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/map.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/marker.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/minus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/mountain.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/over-ie8-data-uri-limit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/example/source/over-ie8-data-uri-limit.png -------------------------------------------------------------------------------- /example/source/piggy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/source/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/svgs/burger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 10 | 11 | 14 | 15 | 16 | 18 | 19 | 21 | 22 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /example/svgs/chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /example/svgs/cloud-sync.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /example/svgs/delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /example/svgs/disc-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example/svgs/disc-plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example/svgs/eye.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/svgs/flag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /example/svgs/hotdiggity.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 11 | 12 | 14 | 16 | 18 | 23 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/svgs/kswiss.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/svgs/map.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/svgs/marker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /example/svgs/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /example/svgs/minus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /example/svgs/mountain.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /example/svgs/piggy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 13 | 14 | -------------------------------------------------------------------------------- /example/svgs/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/svgs/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "grunt-grunticon", 3 | "description": "A mystical CSS icon solution", 4 | "version": "2.3.2", 5 | "homepage": "https://github.com/filamentgroup/grunticon", 6 | "author": { 7 | "name": "Scott Jehl", 8 | "email": "scott@filamentgroup.com", 9 | "url": "http://filamentgroup.com" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/filamentgroup/grunticon" 14 | }, 15 | "bugs": { 16 | "url": "https://github.com/filamentgroup/grunticon/issues" 17 | }, 18 | "license": "MIT", 19 | "main": "Gruntfile.js", 20 | "engines": { 21 | "node": ">= 0.10.0" 22 | }, 23 | "scripts": { 24 | "test": "grunt travis --verbose" 25 | }, 26 | "dependencies": { 27 | "grunticon-lib": "^1.2.3" 28 | }, 29 | "devDependencies": { 30 | "grunt": "^1.0.1", 31 | "grunt-cli": "^1.2.0", 32 | "grunt-contrib-clean": "^1.0.0", 33 | "grunt-contrib-jshint": "^1.0.0", 34 | "grunt-contrib-nodeunit": "^1.0.0", 35 | "grunt-contrib-qunit": "^1.2.0", 36 | "grunt-svgmin": "^2.0.1" 37 | }, 38 | "keywords": [ 39 | "gruntplugin" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /site/.htaccess: -------------------------------------------------------------------------------- 1 | AddType text/html .html 2 | AddHandler server-parsed .html 3 | Options Indexes Includes FollowSymlinks 4 | 5 | # compress transfer 6 | 7 | AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript 8 | -------------------------------------------------------------------------------- /site/gruntfile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * grunticon 3 | * https://github.com/filamentgroup/grunticon 4 | * 5 | * Copyright (c) 2012 Scott Jehl 6 | * Licensed under the MIT license. 7 | */ 8 | 9 | module.exports = function(grunt) { 10 | "use strict"; 11 | 12 | // Project configuration. 13 | grunt.initConfig({ 14 | watch: { 15 | files: 'src/svg/*', 16 | tasks: 'default' 17 | }, 18 | svgmin: { 19 | dist: { 20 | files: [{ 21 | expand: true, 22 | cwd: 'src/svg', 23 | src: ['*.svg'], 24 | dest: 'src/svg' 25 | }] 26 | } 27 | }, 28 | grunticon: { 29 | foo: { 30 | files: [{ 31 | expand: true, 32 | cwd: 'src/svg', 33 | src: ['*.svg', '*.png'], 34 | dest: "grunticon/" 35 | }], 36 | options: { 37 | 38 | // CSS filenames 39 | datasvgcss: "icons.data.svg.css", 40 | datapngcss: "icons.data.png.css", 41 | urlpngcss: "icons.fallback.css", 42 | 43 | // grunticon loader code snippet filename 44 | loadersnippet: "grunticon.loader.js", 45 | 46 | // folder name (within dest) for png output 47 | pngfolder: "png", 48 | 49 | // prefix for CSS classnames 50 | cssprefix: ".icon-", 51 | 52 | 53 | // css file path prefix - this defaults to "/" and will be placed before the "dest" path when stylesheets are loaded. 54 | // This allows root-relative referencing of the CSS. If you don't want a prefix path, set to to "" 55 | cssbasepath: "/", 56 | enhanceSVG: true 57 | 58 | } 59 | } 60 | } 61 | }); 62 | 63 | // Load local tasks. 64 | grunt.loadNpmTasks( 'grunt-contrib-watch' ); 65 | grunt.loadNpmTasks( 'grunt-svgmin' ); 66 | 67 | //load parent grunti 68 | grunt.loadTasks('../tasks'); 69 | 70 | // Default task. 71 | grunt.registerTask('default', [ 'svgmin', 'grunticon']); 72 | 73 | 74 | }; 75 | 76 | -------------------------------------------------------------------------------- /site/grunticon/grunticon.loader.js: -------------------------------------------------------------------------------- 1 | /*! grunt-grunticon Stylesheet Loader - v2.0.2 | https://github.com/filamentgroup/grunticon | (c) 2015 Scott Jehl, Filament Group, Inc. | MIT license. */ 2 | 3 | (function(e){function t(t,n,r,o){"use strict";function a(){for(var e,n=0;u.length>n;n++)u[n].href&&u[n].href.indexOf(t)>-1&&(e=!0);e?i.media=r||"all":setTimeout(a)}var i=e.document.createElement("link"),c=n||e.document.getElementsByTagName("script")[0],u=e.document.styleSheets;return i.rel="stylesheet",i.href=t,i.media="only x",i.onload=o||function(){},c.parentNode.insertBefore(i,c),a(),i}var n=function(r,o){"use strict";if(r&&3===r.length){var a=e.navigator,i=e.Image,c=!(!document.createElementNS||!document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||e.opera&&-1===a.userAgent.indexOf("Chrome")||-1!==a.userAgent.indexOf("Series40")),u=new i;u.onerror=function(){n.method="png",n.href=r[2],t(r[2])},u.onload=function(){var e=1===u.width&&1===u.height,a=r[e&&c?0:e?1:2];n.method=e&&c?"svg":e?"datapng":"png",n.href=a,t(a,null,null,o)},u.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",document.documentElement.className+=" grunticon"}};n.loadCSS=t,e.grunticon=n})(this);(function(e,t){"use strict";var n=t.document,r="grunticon:",o=function(e){if(n.attachEvent?"complete"===n.readyState:"loading"!==n.readyState)e();else{var t=!1;n.addEventListener("readystatechange",function(){t||(t=!0,e())},!1)}},a=function(e){return t.document.querySelector('link[href$="'+e+'"]')},c=function(e){var t,n,o,a,c,i,u={};if(t=e.sheet,!t)return u;n=t.cssRules?t.cssRules:t.rules;for(var l=0;n.length>l;l++)o=n[l].cssText,a=r+n[l].selectorText,c=o.split(");")[0].match(/US\-ASCII\,([^"']+)/),c&&c[1]&&(i=decodeURIComponent(c[1]),u[a]=i);return u},i=function(e){var t,o,a;o="data-grunticon-embed";for(var c in e)if(a=c.slice(r.length),t=n.querySelectorAll(a+"["+o+"]"),t.length)for(var i=0;t.length>i;i++)t[i].innerHTML=e[c],t[i].style.backgroundImage="none",t[i].removeAttribute(o);return t},u=function(){"svg"===e.method&&o(function(){i(c(a(e.href))),e.embedComplete&&e.embedComplete()})};e.embedIcons=i,e.getCSS=a,e.getIcons=c,e.ready=o,e.svgLoadedCallback=u})(grunticon,this); -------------------------------------------------------------------------------- /site/grunticon/icons.fallback.css: -------------------------------------------------------------------------------- 1 | .icon-ad { background-image: url('png/ad.png'); background-repeat: no-repeat; } 2 | 3 | .icon-bill { background-image: url('png/bill.png'); background-repeat: no-repeat; } 4 | 5 | .icon-bowling { background-image: url('png/bowling.png'); background-repeat: no-repeat; } 6 | 7 | .icon-browsers { background-image: url('png/browsers.png'); background-repeat: no-repeat; } 8 | 9 | .icon-button { background-image: url('png/button.png'); background-repeat: no-repeat; } 10 | 11 | .icon-buzzer { background-image: url('png/buzzer.png'); background-repeat: no-repeat; } 12 | 13 | .icon-calculator { background-image: url('png/calculator.png'); background-repeat: no-repeat; } 14 | 15 | .icon-close { background-image: url('png/close.png'); background-repeat: no-repeat; } 16 | 17 | .icon-converse { background-image: url('png/converse.png'); background-repeat: no-repeat; } 18 | 19 | .icon-conveyor { background-image: url('png/conveyor.png'); background-repeat: no-repeat; } 20 | 21 | .icon-demoltion { background-image: url('png/demoltion.png'); background-repeat: no-repeat; } 22 | 23 | .icon-fg-logo { background-image: url('png/fg-logo.png'); background-repeat: no-repeat; } 24 | 25 | .icon-fire extinguisher { background-image: url('png/fire extinguisher.png'); background-repeat: no-repeat; } 26 | 27 | .icon-helmet { background-image: url('png/helmet.png'); background-repeat: no-repeat; } 28 | 29 | .icon-icecream { background-image: url('png/icecream.png'); background-repeat: no-repeat; } 30 | 31 | .icon-lamp { background-image: url('png/lamp.png'); background-repeat: no-repeat; } 32 | 33 | .icon-logo { background-image: url('png/logo.png'); background-repeat: no-repeat; } 34 | 35 | .icon-luggage { background-image: url('png/luggage.png'); background-repeat: no-repeat; } 36 | 37 | .icon-majestic { background-image: url('png/majestic.png'); background-repeat: no-repeat; } 38 | 39 | .icon-microscope { background-image: url('png/microscope.png'); background-repeat: no-repeat; } 40 | 41 | .icon-npm-logo { background-image: url('png/npm-logo.png'); background-repeat: no-repeat; } 42 | 43 | .icon-passport { background-image: url('png/passport.png'); background-repeat: no-repeat; } 44 | 45 | .icon-plane { background-image: url('png/plane.png'); background-repeat: no-repeat; } 46 | 47 | .icon-plus { background-image: url('png/plus.png'); background-repeat: no-repeat; } 48 | 49 | .icon-presentation { background-image: url('png/presentation.png'); background-repeat: no-repeat; } 50 | 51 | .icon-server { background-image: url('png/server.png'); background-repeat: no-repeat; } 52 | 53 | .icon-skate { background-image: url('png/skate.png'); background-repeat: no-repeat; } 54 | 55 | .icon-smart watch { background-image: url('png/smart watch.png'); background-repeat: no-repeat; } 56 | 57 | .icon-switcher { background-image: url('png/switcher.png'); background-repeat: no-repeat; } 58 | 59 | .icon-theatre { background-image: url('png/theatre.png'); background-repeat: no-repeat; } 60 | 61 | .icon-tie { background-image: url('png/tie.png'); background-repeat: no-repeat; } 62 | 63 | .icon-top { background-image: url('png/top.png'); background-repeat: no-repeat; } 64 | 65 | .icon-tower { background-image: url('png/tower .png'); background-repeat: no-repeat; } 66 | 67 | .icon-turntable { background-image: url('png/turntable.png'); background-repeat: no-repeat; } 68 | 69 | .icon-umbrella { background-image: url('png/umbrella.png'); background-repeat: no-repeat; } 70 | 71 | .icon-vespa { background-image: url('png/vespa.png'); background-repeat: no-repeat; } 72 | 73 | .icon-wacom { background-image: url('png/wacom.png'); background-repeat: no-repeat; } 74 | 75 | .icon-workspace { background-image: url('png/workspace.png'); background-repeat: no-repeat; } 76 | 77 | .icon-wrench { background-image: url('png/wrench.png'); background-repeat: no-repeat; } 78 | 79 | .icon-x { background-image: url('png/x.png'); background-repeat: no-repeat; } 80 | 81 | -------------------------------------------------------------------------------- /site/grunticon/png/ad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/ad.png -------------------------------------------------------------------------------- /site/grunticon/png/bill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/bill.png -------------------------------------------------------------------------------- /site/grunticon/png/bowling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/bowling.png -------------------------------------------------------------------------------- /site/grunticon/png/browsers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/browsers.png -------------------------------------------------------------------------------- /site/grunticon/png/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/button.png -------------------------------------------------------------------------------- /site/grunticon/png/buzzer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/buzzer.png -------------------------------------------------------------------------------- /site/grunticon/png/calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/calculator.png -------------------------------------------------------------------------------- /site/grunticon/png/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/close.png -------------------------------------------------------------------------------- /site/grunticon/png/converse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/converse.png -------------------------------------------------------------------------------- /site/grunticon/png/conveyor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/conveyor.png -------------------------------------------------------------------------------- /site/grunticon/png/demoltion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/demoltion.png -------------------------------------------------------------------------------- /site/grunticon/png/fg-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/fg-logo.png -------------------------------------------------------------------------------- /site/grunticon/png/fire extinguisher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/fire extinguisher.png -------------------------------------------------------------------------------- /site/grunticon/png/helmet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/helmet.png -------------------------------------------------------------------------------- /site/grunticon/png/icecream.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/icecream.png -------------------------------------------------------------------------------- /site/grunticon/png/lamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/lamp.png -------------------------------------------------------------------------------- /site/grunticon/png/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/logo.png -------------------------------------------------------------------------------- /site/grunticon/png/luggage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/luggage.png -------------------------------------------------------------------------------- /site/grunticon/png/majestic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/majestic.png -------------------------------------------------------------------------------- /site/grunticon/png/microscope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/microscope.png -------------------------------------------------------------------------------- /site/grunticon/png/npm-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/npm-logo.png -------------------------------------------------------------------------------- /site/grunticon/png/passport.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/passport.png -------------------------------------------------------------------------------- /site/grunticon/png/plane.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/plane.png -------------------------------------------------------------------------------- /site/grunticon/png/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/plus.png -------------------------------------------------------------------------------- /site/grunticon/png/presentation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/presentation.png -------------------------------------------------------------------------------- /site/grunticon/png/server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/server.png -------------------------------------------------------------------------------- /site/grunticon/png/skate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/skate.png -------------------------------------------------------------------------------- /site/grunticon/png/smart watch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/smart watch.png -------------------------------------------------------------------------------- /site/grunticon/png/switcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/switcher.png -------------------------------------------------------------------------------- /site/grunticon/png/theatre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/theatre.png -------------------------------------------------------------------------------- /site/grunticon/png/tie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/tie.png -------------------------------------------------------------------------------- /site/grunticon/png/top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/top.png -------------------------------------------------------------------------------- /site/grunticon/png/tower .png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/tower .png -------------------------------------------------------------------------------- /site/grunticon/png/turntable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/turntable.png -------------------------------------------------------------------------------- /site/grunticon/png/umbrella.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/umbrella.png -------------------------------------------------------------------------------- /site/grunticon/png/vespa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/vespa.png -------------------------------------------------------------------------------- /site/grunticon/png/wacom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/wacom.png -------------------------------------------------------------------------------- /site/grunticon/png/workspace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/workspace.png -------------------------------------------------------------------------------- /site/grunticon/png/wrench.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/wrench.png -------------------------------------------------------------------------------- /site/grunticon/png/x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/grunticon/png/x.png -------------------------------------------------------------------------------- /site/grunticon/preview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icons Preview! 5 | 6 | 13 | 21 | 22 | 23 | 24 | 25 | 26 |

PREVIEW - you can change this in the previewTemplate option

27 | 28 | 29 | 
.icon-browsers:
30 | 31 | 32 | 33 | 
.icon-converse:
34 | 35 | 36 | 37 | 
.icon-conveyor:
38 | 39 | 40 | 41 | 
.icon-fg-logo:
42 | 43 | 44 | 45 | 
.icon-lamp:
46 | 47 | 48 | 49 | 
.icon-logo:
50 | 51 | 52 | 53 | 
.icon-majestic:
54 | 55 | 56 | 57 | 
.icon-npm-logo:
58 | 59 | 60 | 61 | 
.icon-plane:
62 | 63 | 64 | 65 | 
.icon-plus:
66 | 67 | 68 | 69 | 
.icon-skate:
70 | 71 | 72 | 73 | 
.icon-top:
74 | 75 | 76 | 77 | 
.icon-tower :
78 | 79 | 80 | 81 | 
.icon-vespa:
82 | 83 | 84 | 85 | 
.icon-x:
86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /site/img/browsers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/img/browsers.png -------------------------------------------------------------------------------- /site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Grunticon 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |

very proudly presents

18 |

Grunticon! A Flexible SVG Workflow

19 | 20 | 21 | 22 |
23 |
24 |
25 | 26 |
27 |

Hello! This project is archived. We're deprecating it in favor of more current techniques for SVG icons & icon systems.

28 | 29 |

What is Grunticon?

30 | 31 |

Grunticon is a Grunt.js task that makes it easy to use SVGs (Scalable Vector Graphics) for crisp, resolution independent icons, logos, illustrations and background images. SVGs aren't supported everywhere so Grunticon auto-generates bitmap (PNG) fallback images and loads the right format for compatibility with pretty much any browser.

32 | 33 | 34 |

Here are a few example icons from the Balloonicons set by PixelBuddha. Note how the SVGs are sharp on any screen, regardless of resolution, and support multiple colors!

35 | 36 |
37 |
38 |
39 |
40 |
41 | 42 |

Grunticon isn't just for icons, however. In fact, all of the imagery on this very page uses Grunticon—background images and all!

43 | 44 |

Once you set up Grunticon, your workflow is quick and easy: export your SVG files into a folder, and once you run the task, Grunti generates a stylesheet with classes for each graphic with the SVG paths (or PNG fallback) as a background image that you can apply by adding a class to any element; simple as that!

45 | 46 | 
<div class="icon-vespa"></div>
 47 | <div class="icon-converse"></div>
 48 | <div class="icon-skate"></div>
49 | 50 | 51 |

Can I apply CSS to them?

52 | 53 |

Absolutely. One of the many benefits to SVG is that it's designed specifically for the purpose of creating rich vector artwork for the web. As of Grunticon version 2, you can specify that some or all of your icons be embedded directly into your markup, so you can write CSS against the elements in your icon's SVG markup!

54 | 55 |

Here's an example of a single icon recolored with CSS alone.

56 | 57 |
58 |
59 |
60 |
61 |
62 | 63 |

And here's what the code for that looks like:

64 | 65 |

HTML:

66 | 
<div class="icon-lamp icon-lamp-a" data-grunticon-embed></div>
 67 | <div class="icon-lamp icon-lamp-b" data-grunticon-embed></div>
 68 | <div class="icon-lamp icon-lamp-c" data-grunticon-embed></div>
69 | 70 |

CSS:

71 | 
.icon-lamp-a path.lampshade {
 72 | 	fill: darkolivegreen;
 73 | }
 74 | .icon-lamp-b path.lampshade {
 75 | 	fill: turquoise;
 76 | }
 77 | .icon-lamp-c path.lampshade {
 78 | 	fill: papayawhip;
 79 | }
80 | 81 | 82 |

Can I animate them?

83 | 84 |

Is a uniconkey grumpy?! (...yes.) With the new embedding feature, you can write JavaScript to manipulate your SVGs as well. Check out these icons with a little animation applied! (Note: tap the light to turn it on.)

85 | 86 | 87 |
88 | 89 |
90 |
91 |
92 | 93 | 94 | 95 | 96 |

Neat! So it only works in new browsers, right?

97 | 98 |

Wrong! Grunticon generates fallback PNG images for your icons and makes sure those are used in any browser that doesn't understand SVG. Go ahead, check out this page in IE7 if you'd like (even IE6 will get usable icons). You won't see CSS and JavaScript enhancements applied to the icons like an SVG supporting browser would see, but you'll definitely see a static icon, and that's often critical to the usability of your site.

99 | 100 |

Sold! How do I start using it?

101 | 102 |

If you're already familiar with Node.js and Grunt, you can find Grunticon on NPM.

103 | 104 |

If you're new to Node.js or Grunt, you're going to need to install and configure a few things. Go to this section of the Grunticon Readme and follow the instructions.

105 | 106 |
107 | 108 | 109 |
110 |

Grunticon was created by the folks at

111 |
112 | 113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "grunticon-site", 3 | "version": "1.0.0", 4 | "description": "Grunticon how-to site", 5 | "author": "Filament Group ", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "grunt": "0.4.4", 9 | "grunt-contrib-watch": "0.3.1", 10 | "grunt-svgmin": "0.3.0", 11 | "grunticon-lib": "1.2.3" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /site/src/css/all.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Arvo'; 3 | font-style: normal; 4 | font-weight: 400; 5 | src: local('Arvo'), url(src/css/arvo-regular-webfont.woff2) format('woff2'), url(src/css/arvo-regular-webfont.woff) format('woff'), url(src/css/arvo-regular-webfont.ttf) format('truetype'); 6 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 7 | } 8 | @font-face { 9 | font-family: 'Pacifico'; 10 | font-style: normal; 11 | font-weight: 400; 12 | src: local('Pacifico Regular'), url(src/css/pacifico-webfont.woff2) format('woff2'), url(src/css/pacifico-webfont.woff) format('woff'), url(src/css/pacifico-webfont.ttf) format('truetype'); 13 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 14 | } 15 | 16 | /* animation keyframes */ 17 | 18 | /* logo down animation */ 19 | @-webkit-keyframes logo { 20 | 0% { 21 | opacity: 0; 22 | -webkit-transform: translateY(-10%); 23 | transform: translateY(-10%); 24 | } 25 | 100% { 26 | opacity: 1; 27 | -webkit- transform: translateY(0); 28 | transform: translateY(0); 29 | } 30 | } 31 | @keyframes logo { 32 | 0% { 33 | opacity: 0; 34 | -webkit-transform: translateY(-10%); 35 | transform: translateY(-10%); 36 | } 37 | 100% { 38 | opacity: 1; 39 | -webkit- transform: translateY(0); 40 | transform: translateY(0); 41 | } 42 | } 43 | 44 | /* skywriter plane */ 45 | @-webkit-keyframes skywriter { 46 | 0% { 47 | -webkit-transform: translateX(-63%); 48 | transform: translateX(-63%); 49 | } 50 | 100% { 51 | -webkit-transform: translateX(0); 52 | transform: translateX(0); 53 | } 54 | } 55 | @keyframes skywriter { 56 | 0% { 57 | -webkit-transform: translateX(-63%); 58 | transform: translateX(-63%); 59 | } 60 | 100% { 61 | -webkit-transform: translateX(0); 62 | transform: translateX(0); 63 | } 64 | } 65 | 66 | /* grunticon logo */ 67 | @-webkit-keyframes glogo { 68 | 0% { 69 | opacity: 0; 70 | -webkit-transform: translateY(70%); 71 | transform: translateY(70%); 72 | } 73 | 100% { 74 | opacity: 1; 75 | -webkit-transform: translateY(0); 76 | transform: translateY(0); 77 | } 78 | } 79 | @keyframes glogo { 80 | 0% { 81 | opacity: 0; 82 | -webkit-transform: translateY(70%); 83 | transform: translateY(70%); 84 | } 85 | 100% { 86 | opacity: 1; 87 | -webkit-transform: translateY(0); 88 | transform: translateY(0); 89 | } 90 | } 91 | 92 | /* lightbulb animation */ 93 | @-webkit-keyframes lightblink { 94 | 0% { 95 | opacity: 0; 96 | } 97 | 8% { 98 | opacity: 0; 99 | } 100 | 9% { 101 | opacity: .4; 102 | } 103 | 10% { 104 | opacity: 0; 105 | } 106 | 13% { 107 | opacity: 0; 108 | } 109 | 14% { 110 | opacity: .4; 111 | } 112 | 15% { 113 | opacity: 0; 114 | } 115 | 30% { 116 | opacity: 0; 117 | min-height: 0; 118 | } 119 | 100% { 120 | opacity: 1; 121 | min-height: 100px; 122 | } 123 | } 124 | @keyframes lightblink { 125 | 0% { 126 | opacity: 0; 127 | } 128 | 8% { 129 | opacity: 0; 130 | } 131 | 9% { 132 | opacity: .4; 133 | } 134 | 10% { 135 | opacity: 0; 136 | } 137 | 13% { 138 | opacity: 0; 139 | } 140 | 14% { 141 | opacity: .4; 142 | } 143 | 15% { 144 | opacity: 0; 145 | } 146 | 30% { 147 | opacity: 0; 148 | min-height: 0; 149 | } 150 | 100% { 151 | opacity: 1; 152 | min-height: 100px; 153 | } 154 | } 155 | 156 | /* tower animation */ 157 | @-webkit-keyframes tower { 158 | 0% { 159 | opacity: 0; 160 | } 161 | 80% { 162 | opacity: 1; 163 | } 164 | 100% { 165 | opacity: 0; 166 | } 167 | } 168 | @keyframes tower { 169 | 0% { 170 | opacity: 0; 171 | } 172 | 80% { 173 | opacity: 1; 174 | } 175 | 100% { 176 | opacity: 0; 177 | } 178 | } 179 | 180 | /* conveyor animation */ 181 | 182 | @-webkit-keyframes conveyor { 183 | 0% { 184 | -webkit-transform: translateX(0px); 185 | transform: translateX(0px); 186 | } 187 | 100% { 188 | -webkit-transform: translateX(-30px); 189 | transform: translateX(-30px); 190 | } 191 | } 192 | @keyframes conveyor { 193 | 0% { 194 | -webkit-transform: translateX(0px); 195 | transform: translateX(0px); 196 | } 197 | 100% { 198 | -webkit-transform: translateX(-30px); 199 | transform: translateX(-30px); 200 | } 201 | } 202 | 203 | 204 | body { 205 | font-family: serif; 206 | margin: 0; 207 | color: #444; 208 | overflow-x: hidden; 209 | background: #fff; 210 | } 211 | .font-arvo body { 212 | font-family: Arvo, serif; 213 | } 214 | a { 215 | color: #42b549; 216 | } 217 | .header { 218 | width: 100%; 219 | height: 485px; 220 | padding: 1px 0; 221 | background-color: #1d8ac8; 222 | position: relative; 223 | overflow: hidden; 224 | } 225 | .head-inner { 226 | background-repeat: repeat-x; 227 | background-position: center bottom; 228 | position: absolute; 229 | bottom: 0; 230 | width: 100%; 231 | height: 500px; 232 | z-index: 1; 233 | } 234 | .head-inner.icon-top { 235 | background-repeat: repeat-x; 236 | background-position: center bottom; 237 | } 238 | .fg { 239 | text-align: center; 240 | color: #fff; 241 | position: relative; 242 | -webkit-animation: logo 1s ease-out 1; 243 | -moz-animation: logo 1s ease-out 1; 244 | -o-animation: logo 1s ease-out 1; 245 | animation: logo 1s ease-out 1; 246 | -webkit-animation-fill-mode: forwards; 247 | animation-fill-mode: forwards; 248 | margin: 0 auto 1em; 249 | } 250 | .fg a { 251 | display: block; 252 | text-indent: -9999px; 253 | overflow: hidden; 254 | width: 200px; 255 | height: 32px; 256 | margin: 1.5em auto 0; 257 | position: relative; 258 | z-index: 200; 259 | } 260 | .fg em { 261 | display: block; 262 | font-style: italic; 263 | color: #fff; 264 | color: rgba(255, 255, 255, .9); 265 | font-family: cursive; 266 | font-weight: normal; 267 | font-style: normal; 268 | font-size: 1.25em; 269 | background-color: #1d8ac8; 270 | position: relative; 271 | z-index: 1; 272 | display: inline-block; 273 | } 274 | .font-pacifico .fg em { 275 | font-family: pacifico, cursive; 276 | } 277 | .fg:after { 278 | content: "\20"; 279 | position: absolute; 280 | bottom: .65em; 281 | border-bottom: 2px solid #fff; 282 | border-color: rgba(255, 255, 255, .9); 283 | width: 100%; 284 | display: block; 285 | width: 60%; 286 | left: 20%; 287 | } 288 | h1.icon-logo { 289 | width: 246px; 290 | height: 190px; 291 | overflow: hidden; 292 | position: relative; 293 | margin: .5em auto; 294 | -webkit-animation: glogo 2s ease-in-out 1; 295 | -moz-animation: glogo 2s ease-in-out 1; 296 | -o-animation: glogo 2s ease-in-out 1; 297 | animation: glogo 2s ease-in-out 1; 298 | -webkit-animation-delay: 1s; 299 | -moz-animation-delay: 1s; 300 | -o-animation-delay: 1s; 301 | animation-delay: 1s; 302 | -webkit-animation-fill-mode: backwards; 303 | animation-fill-mode: backwards; 304 | z-index: 2; 305 | } 306 | .grunticon-svg h1.icon-logo { 307 | z-index: 0; 308 | } 309 | .icon-plane { 310 | width: 1900px; 311 | height: 35px; 312 | display: block; 313 | position: absolute; 314 | left: 81%; 315 | bottom: 0; 316 | background-position: 0 bottom; 317 | background-color: #1d8ac8; 318 | z-index: 100; 319 | -webkit-animation: skywriter 4.5s cubic-bezier(0.000, 0, 0.025, 1) 1; 320 | -moz-animation: skywriter 4.5s cubic-bezier(0.000, 0, 0.025, 1) 1; 321 | -o-animation: skywriter 4.5s cubic-bezier(0.000, 0, 0.025, 1) 1; 322 | animation: skywriter 4.5s cubic-bezier(0.000, 0, 0.025, 1) 1; 323 | } 324 | .icon-majestic { 325 | position: absolute; 326 | right: 2%; 327 | top: 17em; 328 | display: block; 329 | width: 86px; 330 | height: 85px; 331 | z-index: 20; 332 | } 333 | .hide-a11y { 334 | position: absolute; 335 | left: -9999px; 336 | top: -9999px; 337 | } 338 | .content { 339 | max-width: 45em; 340 | padding: 0em 5% 2em; 341 | margin: -6em auto 0; 342 | line-height: 1.4; 343 | position: relative; 344 | z-index: 10; 345 | } 346 | .footer { 347 | max-width: 45em; 348 | padding: .5em 5%; 349 | margin: 0 auto; 350 | background-color: #1d8ac8; 351 | color: #fff; 352 | text-align: center; 353 | } 354 | .footer .icon-fg-logo { 355 | display: block; 356 | text-indent: -9999px; 357 | overflow: hidden; 358 | width: 200px; 359 | height: 32px; 360 | margin: .5em auto; 361 | } 362 | h2, h3 { 363 | color: #1073B3; 364 | font-weight: normal; 365 | line-height: 1.2; 366 | clear: both; 367 | } 368 | h2 { 369 | font-family: cursive; 370 | font-size: 1.4em; 371 | margin: 1.5em 0 .1em; 372 | } 373 | .font-pacifico h2 { 374 | font-family: pacifico, cursive; 375 | } 376 | h3 { 377 | text-transform: uppercase; 378 | font-size: 1em; 379 | margin-bottom: 0; 380 | } 381 | .content p { 382 | font-size: 1em; 383 | } 384 | pre, .icon-group { 385 | margin: 1em 0; 386 | padding: 1em; 387 | border: 4px solid #a39c90; 388 | } 389 | pre { 390 | background: #444; 391 | color: #f3f2f0; 392 | font-size: 1.2em; 393 | font-family: consolata, monospace; 394 | overflow: auto; 395 | } 396 | .icon-group { 397 | background: #f3f2f0; 398 | padding: 0; 399 | overflow: auto; 400 | } 401 | .icon-group div, .icon-group a { 402 | float: left; 403 | width: 30%; 404 | list-style: none; 405 | height: 100px; 406 | background-position: 50% 50%; 407 | min-width: 100px; 408 | margin: 1em 1.5%; 409 | padding: 0; 410 | text-align: center; 411 | } 412 | .icon-lamp-a path.lampshade { 413 | fill: darkolivegreen; 414 | } 415 | .icon-lamp-b path.lampshade { 416 | fill: turquoise; 417 | } 418 | .icon-lamp-c path.lampshade { 419 | fill: papayawhip; 420 | } 421 | .icon-browsers { 422 | padding-bottom: 123px; 423 | background-position: bottom center; 424 | } 425 | 426 | .icon-lamp-blink path.bulb-on, 427 | .icon-lamp-blink path.shade-inner, 428 | .icon-lamp-blink path.beam { 429 | opacity: 0; 430 | } 431 | .icon-lamp-blink path.beam { 432 | fill: rgba(255, 255, 255, .7); 433 | } 434 | .icon-lamp-blink.on path.bulb-on, 435 | .icon-lamp-blink.on path.shade-inner, 436 | .icon-lamp-blink.on path.beam { 437 | -webkit-animation: lightblink 3s 1; 438 | -moz-animation: lightblink 3s 1; 439 | -o-animation: lightblink 3s 1; 440 | animation: lightblink 3s 1; 441 | opacity: 1; 442 | } 443 | 444 | .icon-tower path.ring1, 445 | .icon-tower path.ring2, 446 | .icon-tower path.ring3, 447 | .icon-tower path.ring4 { 448 | -webkit-animation: tower 1s infinite; 449 | -moz-animation: tower 1s infinite; 450 | -o-animation: tower 1s infinite; 451 | animation: tower 1s infinite; 452 | } 453 | .icon-tower path.ring2 { 454 | -webkit-animation-delay: .2s; 455 | -moz-animation-delay: .2s; 456 | -o-animation-delay: .2s; 457 | animation-delay: .2s; 458 | } 459 | .icon-tower path.ring3 { 460 | -webkit-animation-delay: .4s; 461 | -moz-animation-delay: .4s; 462 | -o-animation-delay: .4s; 463 | animation-delay: .4s; 464 | } 465 | .icon-tower path.ring4 { 466 | -webkit-animation-delay: .6s; 467 | -moz-animation-delay: .6s; 468 | -o-animation-delay: .6s; 469 | animation-delay: .6s; 470 | } 471 | 472 | .icon-conveyor g.products path { 473 | position: relative; 474 | -webkit-animation: conveyor 2s infinite; 475 | -moz-animation: conveyor 2s infinite; 476 | -o-animation: conveyor 2s infinite; 477 | animation: conveyor 2s infinite; 478 | } 479 | 480 | 481 | @media (min-width: 40em) { 482 | .content { 483 | line-height: 1.5; 484 | } 485 | h2 { 486 | font-size: 2.1875em; 487 | margin: 1.5em 0 .05em; 488 | border-bottom: 3px solid #eee; 489 | display: inline-block; 490 | } 491 | .content p { 492 | font-size: 1.1em; 493 | } 494 | .icon-majestic { 495 | top: 18em; 496 | } 497 | } 498 | 499 | .archived { 500 | background: #f8f897; 501 | padding: 1rem; 502 | border-radius: 4px; 503 | } -------------------------------------------------------------------------------- /site/src/css/arvo-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/src/css/arvo-regular-webfont.ttf -------------------------------------------------------------------------------- /site/src/css/arvo-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/src/css/arvo-regular-webfont.woff -------------------------------------------------------------------------------- /site/src/css/arvo-regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/src/css/arvo-regular-webfont.woff2 -------------------------------------------------------------------------------- /site/src/css/pacifico-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/src/css/pacifico-webfont.ttf -------------------------------------------------------------------------------- /site/src/css/pacifico-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/src/css/pacifico-webfont.woff -------------------------------------------------------------------------------- /site/src/css/pacifico-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grunticon/85ade89479b9cb36aa1064ff3ab4b41ff7219d85/site/src/css/pacifico-webfont.woff2 -------------------------------------------------------------------------------- /site/src/js/foot.js: -------------------------------------------------------------------------------- 1 | // animate the plus icon 2 | if( document.querySelector ){ 3 | var toggle = document.querySelector(".icon-lamp-blink"); 4 | var toggleClass = " on"; 5 | if( toggle ){ 6 | toggle.addEventListener( "click", function( e ){ 7 | if( this.className.indexOf( toggleClass ) > -1 ){ 8 | this.className = this.className.replace( toggleClass, "" ); 9 | } 10 | else { 11 | this.className += toggleClass; 12 | } 13 | e.preventDefault(); 14 | }); 15 | } 16 | } 17 | 18 | /*! fontfaceonload - v0.1.3 - 2014-12-22 19 | * https://github.com/zachleat/fontfaceonload 20 | * Copyright (c) 2014 Zach Leatherman (@zachleat) 21 | * MIT License */(function(e,t){"use strict";var n=100,r="AxmTYklsjo190QW",i=2,s="sans-serif",o="serif",u=["display:block","position:absolute","top:-999px","left:-999px","font-size:300px","width:auto","height:auto","line-height:normal","margin:0","padding:0","font-variant:normal","white-space:nowrap","font-family:%s"].join(";"),a='
'+r+"
",f=function(){this.appended=!1,this.dimensions=undefined,this.serif=undefined,this.sansSerif=undefined,this.parent=undefined};f.prototype.initialMeasurements=function(e){var t=this.sansSerif,n=this.serif;this.dimensions={sansSerif:{width:t.offsetWidth,height:t.offsetHeight},serif:{width:n.offsetWidth,height:n.offsetHeight}},t.style.fontFamily=e+", "+s,n.style.fontFamily=e+", "+o},f.prototype.load=function(e,r){var u=new Date,f=this,l=f.serif,c=f.sansSerif,h=f.parent,p=f.appended,d=f.dimensions,v=r.tolerance||i,m=r.delay||n;h||(h=f.parent=t.createElement("div")),h.innerHTML=a.replace(/\%s/,s)+a.replace(/\%s/,o),c=f.sansSerif=h.firstChild,l=f.serif=c.nextSibling,r.glyphs&&(c.innerHTML+=r.glyphs,l.innerHTML+=r.glyphs),function g(){!p&&t.body&&(p=f.appended=!0,t.body.appendChild(h),f.initialMeasurements(e)),d=f.dimensions,p&&d&&(Math.abs(d.sansSerif.width-c.offsetWidth)>v||Math.abs(d.sansSerif.height-c.offsetHeight)>v||Math.abs(d.serif.width-l.offsetWidth)>v||Math.abs(d.serif.height-l.offsetHeight)>v)?r.success():(new Date).getTime()-u.getTime()>r.timeout?r.error():setTimeout(function(){g()},m)}()},f.prototype.init=function(n,r){var i=this,s={glyphs:"",success:function(){},error:function(){},timeout:1e4},o;r||(r={});for(var u in s)r.hasOwnProperty(u)||(r[u]=s[u]);!r.glyphs&&"fonts"in t?(t.fonts.load("1em "+n).then(function(){r.success(),e.clearTimeout(o)}),r.timeout&&(o=e.setTimeout(function(){r.error()},r.timeout))):i.load(n,r)};var l=function(e,t){var n=new f;return n.init(e,t),n};e.FontFaceOnload=l})(this,this.document); 22 | 23 | FontFaceOnload( "Arvo", { success: function(){ 24 | window.document.documentElement.className += " font-arvo"; 25 | }, delay: 150 }); 26 | 27 | FontFaceOnload( "Pacifico", { success: function(){ 28 | window.document.documentElement.className += " font-pacifico"; 29 | }, delay: 150 }); 30 | -------------------------------------------------------------------------------- /site/src/js/head.js: -------------------------------------------------------------------------------- 1 | // call grunticon 2 | var cb = function(){ 3 | grunticon.svgLoadedCallback(); 4 | if( grunticon.method ){ 5 | window.document.documentElement.className += " grunticon-" + grunticon.method; 6 | } 7 | }; 8 | grunticon(["grunticon/icons.data.svg.css", "grunticon/icons.data.png.css", "grunticon/icons.fallback.css"], cb ); -------------------------------------------------------------------------------- /site/src/svg/converse.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/conveyor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/fg-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/lamp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/majestic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/npm-logo.svg: -------------------------------------------------------------------------------- 1 | npm-logo -------------------------------------------------------------------------------- /site/src/svg/plane.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/bill.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/bowling.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/button.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/buzzer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/calculator.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/demoltion.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/fire extinguisher.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/helmet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/icecream.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/luggage.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/microscope.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/passport.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/presentation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/server.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/smart watch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/switcher.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/theatre.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/tie.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/turntable.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/umbrella.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/wacom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/workspace.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/reserve/wrench.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/skate.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/top.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/tower .svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/vespa.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/svg/x.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tasks/grunticon.js: -------------------------------------------------------------------------------- 1 | /* 2 | * grunticon 3 | * https://github.com/filamentgroup/grunticon 4 | * 5 | * Copyright (c) 2012 Scott Jehl, Filament Group, Inc 6 | * Licensed under the MIT license. 7 | */ 8 | 9 | /*global require:true*/ 10 | var Grunticon = require( 'grunticon-lib' ); 11 | 12 | module.exports = function( grunt , undefined ) { 13 | "use strict"; 14 | 15 | grunt.registerMultiTask( 'grunticon', 'A mystical CSS icon solution.', function() { 16 | var done = this.async(); 17 | 18 | // get the config 19 | var config = this.options({ 20 | logger: { 21 | verbose: grunt.verbose.writeln, 22 | fatal: grunt.fatal, 23 | ok: grunt.log.ok 24 | } 25 | }); 26 | 27 | // just a quick starting message 28 | grunt.verbose.writeln( "Look, it's a grunticon!" ); 29 | 30 | var files = this.files.filter( function( file ){ 31 | return file.src[0].match( /png|svg/ ); 32 | }); 33 | 34 | if( files.length === 0 ){ 35 | grunt.log.writeln( "Grunticon has no files to read!" ); 36 | done(); 37 | return; 38 | } 39 | 40 | files = files.map( function( file ){ 41 | return file.src[0]; 42 | }); 43 | 44 | var output = this.files[0].orig.dest; 45 | 46 | if( !output || output && output === "" ){ 47 | grunt.fatal("The destination must be a directory"); 48 | done( false ); 49 | } 50 | 51 | var gicon = new Grunticon(files, output, config); 52 | 53 | gicon.process( done ); 54 | }); 55 | }; 56 | --------------------------------------------------------------------------------