Grumpicon. A Web app for the Grunticon workflow.

├── .jenkins ├── .gitignore ├── public ├── favicon.ico ├── test-svg │ ├── flag.png │ ├── arrow-11.svg │ ├── arrow-tiny.svg │ ├── cat.svg │ ├── star.svg │ ├── grunticon.svg │ ├── plus.svg │ ├── bear.svg │ ├── bear.colors-blue-primary-aa0000.svg │ ├── map.svg │ ├── gradients-flat-opacity.svg │ ├── gradients.svg │ ├── gear.svg │ ├── gummy-bears-1.svg │ ├── gummy-bears-2.svg │ ├── Home_Media.svg │ ├── Internet_Tel.svg │ ├── Internet-no-width-no-height.svg │ ├── Internet.svg │ ├── Internet_FP2.svg │ ├── Image_Exchange.svg │ └── Intranet.svg ├── img │ └── logo_filament-group.png ├── js │ ├── download │ │ ├── download-view.js │ │ └── download-button-view.js │ ├── preview │ │ ├── count-view.js │ │ ├── css-preview-view.js │ │ ├── list-view.js │ │ ├── html-preview-view.js │ │ └── results-view.js │ ├── utils │ │ ├── createImage.js │ │ ├── readFile.js │ │ └── colorfy.js │ ├── base │ │ ├── base-view.js │ │ └── toggle-view.js │ ├── svgs │ │ ├── svg-collection.js │ │ ├── upload-view.js │ │ └── svg-model.js │ ├── config │ │ ├── config-view.js │ │ └── config-model.js │ ├── app.js │ └── modernizr.js ├── dist │ └── main.css └── css │ └── main.css ├── .travis.yml ├── templates ├── example-html.html ├── svg-icons.html ├── file-previews.html ├── script-html.html └── preferences.html ├── .jshintrc ├── LICENSE ├── package.json ├── README.md ├── Gruntfile.js └── index.html /.jenkins: -------------------------------------------------------------------------------- 1 | user: NONE 2 | subdir: . 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | public/lib/ 3 | 4 | .DS_Store 5 | Thumbs.db 6 | .vagrant 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grumpicon/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/test-svg/flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grumpicon/HEAD/public/test-svg/flag.png -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 0.10 4 | before_script: 5 | - npm install -g grunt-cli 6 | -------------------------------------------------------------------------------- /public/img/logo_filament-group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/grumpicon/HEAD/public/img/logo_filament-group.png -------------------------------------------------------------------------------- /templates/example-html.html: -------------------------------------------------------------------------------- 1 | 2 |

{{ cssprefix }}{{ name }}:

3 | -------------------------------------------------------------------------------- /public/js/download/download-view.js: -------------------------------------------------------------------------------- 1 | import {View} from "backbone"; 2 | 3 | export default class DownloadView extends View { 4 | initialize() { 5 | this.listenTo(this.collection, "processed remove", this.render); 6 | } 7 | 8 | render() { 9 | this.$el.fadeIn(); 10 | } 11 | } -------------------------------------------------------------------------------- /templates/svg-icons.html: -------------------------------------------------------------------------------- 1 | {{#each files}} 2 |

3 |

4 |

5 |

{{ file.size }} bytes

6 |

7 |

8 | Remove 9 |

10 | {{/each}} 11 | -------------------------------------------------------------------------------- /public/js/preview/count-view.js: -------------------------------------------------------------------------------- 1 | import {View} from "backbone"; 2 | 3 | export default class CountView extends View { 4 | initialize() { 5 | this.listenTo(this.collection, "processed remove", this.render); 6 | } 7 | 8 | render() { 9 | this.$el.html(`${this.collection.length} Grumpicons`); 10 | } 11 | } -------------------------------------------------------------------------------- /.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 | "es5": true, 15 | "browser": true, 16 | "predef": [ 17 | "define", 18 | "require" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /templates/file-previews.html: -------------------------------------------------------------------------------- 1 |

Export Preview

2 | 3 |

4 |

5 | 6 |

7 |

8 | 9 |

10 |

11 | 12 |

13 |

14 | 15 |

preview.html

16 |

-------------------------------------------------------------------------------- /public/js/utils/createImage.js: -------------------------------------------------------------------------------- 1 | import $ from "jquery"; 2 | 3 | /** 4 | * promisify the img loading process 5 | * @param {string} src Source of the image 6 | * @return {Promise} A promise that resovles when the image is loaded 7 | */ 8 | export default function createImage(src) { 9 | var dfd = $.Deferred(); 10 | var img = new Image(); 11 | 12 | img.onload = () => dfd.resolve(img); 13 | 14 | img.src = src; 15 | 16 | return dfd.promise(); 17 | } -------------------------------------------------------------------------------- /public/js/utils/readFile.js: -------------------------------------------------------------------------------- 1 | import $ from "jquery"; 2 | 3 | /** 4 | * Promisify the file reader 5 | * @param {File} file The file to read 6 | * @return {Promise} A promise that resolves when the file is read 7 | */ 8 | export default function readFile(file) { 9 | var dfd = $.Deferred(); 10 | var reader = new FileReader(); 11 | 12 | reader.onload = e => dfd.resolve(e.target.result); 13 | 14 | reader.onerror = err => dfd.reject(err); 15 | 16 | reader.readAsText(file); 17 | 18 | return dfd.promise(); 19 | } -------------------------------------------------------------------------------- /public/js/base/base-view.js: -------------------------------------------------------------------------------- 1 | import {View} from "backbone"; 2 | 3 | /** 4 | * A base view to extend from that has a simple render method 5 | */ 6 | export default class BaseView extends View { 7 | /** 8 | * standard render. get data and pass it into the template 9 | */ 10 | render() { 11 | this.$el.html(this.template(this.getTemplateData())); 12 | } 13 | 14 | /** 15 | * retun the model's data, can get used to pass any data in the template 16 | * @return {Object} data for the template 17 | */ 18 | getTemplateData() { 19 | return this.model.toJSON(); 20 | } 21 | } -------------------------------------------------------------------------------- /public/test-svg/arrow-11.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | -------------------------------------------------------------------------------- /public/test-svg/arrow-tiny.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | -------------------------------------------------------------------------------- /public/js/base/toggle-view.js: -------------------------------------------------------------------------------- 1 | import $ from "jquery"; 2 | import {View} from "backbone"; 3 | 4 | /** 5 | * a view that handles simple toggling of an element 6 | */ 7 | export default class ToggleView extends View { 8 | initialize(options) { 9 | this.$content = $(options.content); 10 | 11 | this.events = { 12 | "click": "toggle" 13 | }; 14 | 15 | // let the close button/link also trigger the toggle 16 | this.$content.on("click", ".close", (e) => { 17 | e.preventDefault(); 18 | this.$content.hide(); 19 | }); 20 | } 21 | 22 | /** 23 | * toggle the content shown and hidden 24 | * @param {Event} e 25 | */ 26 | toggle(e) { 27 | e.preventDefault(); 28 | this.$content.toggle(); 29 | } 30 | } -------------------------------------------------------------------------------- /public/js/preview/css-preview-view.js: -------------------------------------------------------------------------------- 1 | import BaseView from "./../base/base-view.js"; 2 | import Handlebars from "handlebars"; 3 | 4 | export default class CSSPreviewView extends BaseView { 5 | initialize(options) { 6 | this.config = options.config; 7 | this.datauri = options.datauri; 8 | this.template = Handlebars.compile(this.config.get("template")); 9 | 10 | this.render(); 11 | } 12 | 13 | render() { 14 | var config = this.config; 15 | var html = this.collection.map(model => 16 | this.template({ 17 | customselectors: model.get("selectors"), 18 | prefix: config.get("cssprefix"), 19 | name: model.get("name"), 20 | datauri: this.datauri.call(model) 21 | }) 22 | ).join("\n"); 23 | 24 | this.$el.html(html); 25 | } 26 | } -------------------------------------------------------------------------------- /templates/script-html.html: -------------------------------------------------------------------------------- 1 | <script> 2 | /* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */ 3 | window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}}; 4 | grunticon( [ "{{ datasvgcss }}", "{{ datapngcss }}", "{{ urlpngcss }}" ] ); 5 | </script> 6 | <noscript><link href="{{ urlpngcss }}" rel="stylesheet"></noscript> 7 | -------------------------------------------------------------------------------- /public/js/preview/list-view.js: -------------------------------------------------------------------------------- 1 | import $ from "jquery"; 2 | import BaseView from "./../base/base-view.js"; 3 | import Handlebars from "handlebars" 4 | import template from "./../templates.js"; 5 | 6 | var JST = template.call(window, Handlebars); 7 | 8 | /** 9 | * A preview of the icons, also lets you delete any 10 | */ 11 | export default class ListView extends BaseView { 12 | initialize() { 13 | this.events = { 14 | "click .close": "removeFile" 15 | }; 16 | 17 | this.template = JST["templates/svg-icons.html"]; 18 | 19 | this.listenTo(this.collection, "processed remove", this.render); 20 | } 21 | 22 | getTemplateData() { 23 | var files = this.collection.toJSON(); 24 | return { files }; 25 | } 26 | 27 | /** 28 | * remove the file from the collection 29 | * @param {Event} e 30 | */ 31 | removeFile(e) { 32 | e.preventDefault(); 33 | 34 | var cid = $(e.currentTarget).data("file"); 35 | var file = this.collection.get(cid); 36 | 37 | this.collection.remove(file); 38 | } 39 | } -------------------------------------------------------------------------------- /public/test-svg/cat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Filament Group 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 | -------------------------------------------------------------------------------- /public/js/svgs/svg-collection.js: -------------------------------------------------------------------------------- 1 | import _ from "underscore"; 2 | import {Collection} from "backbone"; 3 | import FileModel from "./svg-model.js"; 4 | import Colorfy from "./../utils/colorfy.js"; 5 | 6 | export default class FileCollection extends Collection { 7 | initialize(models, options) { 8 | this.model = FileModel; 9 | this.config = options.config; 10 | } 11 | 12 | /** 13 | * split the file into multiple files if it has colors, then add it to the collection 14 | * @param {File} file A svg that was dropped 15 | */ 16 | addFile(file) { 17 | var name = file.name.split(".svg")[0]; 18 | var extraColors = this.config.get("colors"); 19 | var colorfy = new Colorfy(name, extraColors, this.config.toJSON()); 20 | 21 | // build files for each color 22 | _.each(colorfy.colors, (color, colorName) => { 23 | let name = `${colorfy.originalFilepath}-${colorName}`; 24 | this.add({ file, color, name }) 25 | }); 26 | 27 | // don't add base SVG if it had colors and the dynamicColorOnly option was true 28 | if (_.isEmpty(colorfy.colors) || !this.config.get("dynamicColorOnly")) { 29 | this.add({ file, name: colorfy.originalFilepath }); 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /public/js/preview/html-preview-view.js: -------------------------------------------------------------------------------- 1 | import _ from "underscore"; 2 | import BaseView from "./../base/base-view"; 3 | import Handlebars from "handlebars"; 4 | import template from "./../templates.js"; 5 | 6 | var JST = template.call(window, Handlebars); 7 | 8 | export default class HTMLPreviewView extends BaseView { 9 | initialize(options) { 10 | this.template = JST["node_modules/grunt-grunticon/example/preview.hbs"]; 11 | this.config = options.config; 12 | this.embedText = options.embedText; 13 | 14 | this.render(); 15 | } 16 | 17 | render() { 18 | var html = this.template(this.getTemplateData()); 19 | this.$el.text(html); 20 | } 21 | 22 | getTemplateData() { 23 | var config = this.config; 24 | 25 | return { 26 | loaderText: "", 27 | embedText: this.embedText, 28 | cssFiles: { 29 | svg: config.get("datasvgcss"), 30 | png: config.get("datapngcss"), 31 | fallback: config.get("urlpngcss") 32 | }, 33 | icons: this.collection.map(model => { 34 | return { 35 | prefix: config.get("cssprefix"), 36 | name: model.get("name"), 37 | width: model.get("width"), 38 | height: model.get("height"), 39 | selectorType: "class", 40 | selectorString: config.get("cssprefix").slice(1) 41 | } 42 | }) 43 | }; 44 | } 45 | } -------------------------------------------------------------------------------- /public/test-svg/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 20 | -------------------------------------------------------------------------------- /public/test-svg/grunticon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | -------------------------------------------------------------------------------- /public/js/config/config-view.js: -------------------------------------------------------------------------------- 1 | import BaseView from "./../base/base-view.js"; 2 | import Handlebars from "handlebars"; 3 | import template from "./../templates.js"; 4 | 5 | // Handlebars helper for JSON 6 | Handlebars.registerHelper("json", context => JSON.stringify(context)); 7 | 8 | var JST = template.call(window, Handlebars); 9 | 10 | 11 | /** 12 | * View for updating the grumpiconfigs 13 | */ 14 | export default class ConfigView extends BaseView { 15 | initialize() { 16 | this.template = JST["templates/preferences.html"]; 17 | this.events = { 18 | "change input, textarea": "updateModel", 19 | "click .reset": "resetToDefaults" 20 | }; 21 | 22 | this.listenTo(this.model, "change:fromStorage", this.render); 23 | 24 | this.render(); 25 | } 26 | 27 | /** 28 | * update a preference from a changed input 29 | * @param {Event} e 30 | */ 31 | updateModel(e) { 32 | var attr = e.target.name; 33 | var value = e.target.value; 34 | 35 | // for certain options, parse it from a string 36 | if (/^(customselectors|colors|dynamicColorOnly)$/.test(attr)) { 37 | try { 38 | value = JSON.parse(value); 39 | } catch(e) {} 40 | } 41 | 42 | this.model.set(attr, value); 43 | this.model.setLocalStorage(); 44 | } 45 | 46 | /** 47 | * reset the model to the defaults 48 | * @param {Event} e 49 | */ 50 | resetToDefaults(e) { 51 | e.preventDefault(); 52 | 53 | this.model.setToDefault(); 54 | } 55 | } -------------------------------------------------------------------------------- /public/test-svg/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "grunticon-app", 3 | "description": "The best project ever.", 4 | "version": "0.1.0", 5 | "homepage": "https://github.com/filamentgroup/grunticon-app", 6 | "author": { 7 | "name": "Filament Group", 8 | "email": "thegroup@filamentgroup.com" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/filamentgroup/grunticon-app" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/filamentgroup/grunticon-app/issues" 16 | }, 17 | "licenses": [ 18 | { 19 | "type": "MIT", 20 | "url": "https://github.com/filamentgroup/grunticon-app/blob/master/LICENSE-MIT" 21 | } 22 | ], 23 | "engines": { 24 | "node": ">= 0.8.0", 25 | "npm": "1.2.x" 26 | }, 27 | "scripts": { 28 | "test": "grunt test" 29 | }, 30 | "dependencies": { 31 | "backbone": "^1.1.2", 32 | "handlebars": "^1.3.0", 33 | "jquery": "^2.1.3", 34 | "jszip": "^2.4.0", 35 | "underscore": "^1.7.0" 36 | }, 37 | "devDependencies": { 38 | "6to5ify": "^4.1.0", 39 | "grunt": "^0.4.5", 40 | "grunt-browserify": "^3.3.0", 41 | "grunt-cli": "^0.1.13", 42 | "grunt-contrib-cssmin": "~0.9.0", 43 | "grunt-contrib-handlebars": "~0.8.0", 44 | "grunt-contrib-jshint": "~0.1.1", 45 | "grunt-contrib-nodeunit": "~0.1.2", 46 | "grunt-contrib-uglify": "^0.7.0", 47 | "grunt-contrib-watch": "~0.2.0", 48 | "grunt-grunticon": "~2.1.1", 49 | "grunt-modernizr": "~0.5.2" 50 | }, 51 | "keywords": [] 52 | } 53 | -------------------------------------------------------------------------------- /public/js/svgs/upload-view.js: -------------------------------------------------------------------------------- 1 | import {View} from "backbone"; 2 | 3 | 4 | /** 5 | * The drop area that handles the SVG drops 6 | */ 7 | export default class UploadView extends View { 8 | initialize() { 9 | this.events = { 10 | "drop": "fileDrop", 11 | "dragover": "highlight", 12 | "dragleave": "highlightOff", 13 | "click #upload-btn": "fileUploadBtnClick", 14 | "change #upload": "fileUpload" 15 | }; 16 | } 17 | 18 | /** 19 | * Add a list of files to the file collection 20 | * @param {FileList} fileList The FileList object that should be added 21 | */ 22 | addFiles(fileList) { 23 | [].slice.call(fileList).forEach(file => this.collection.addFile(file)); 24 | } 25 | 26 | /** Handle dropped files */ 27 | fileDrop(e) { 28 | e.preventDefault(); 29 | e.stopPropagation(); 30 | 31 | this.addFiles(e.originalEvent.dataTransfer.files); 32 | this.highlightOff(); 33 | } 34 | 35 | /** Highlight the page's background on drag over */ 36 | highlight(e) { 37 | e.stopPropagation(); 38 | e.preventDefault(); 39 | 40 | e.originalEvent.dataTransfer.dropEffect = "copy"; 41 | this.$("body").addClass("dragover"); 42 | } 43 | 44 | /** Turn off the highlight when a file is dropped or the dragged off */ 45 | highlightOff() { 46 | this.$("body").removeClass("dragover"); 47 | } 48 | 49 | /** trigger a click on the actual file input */ 50 | fileUploadBtnClick(e) { 51 | e.preventDefault(); 52 | this.$("#upload").click(); 53 | } 54 | 55 | /** take the files uploaded and add them to the collection */ 56 | fileUpload(e) { 57 | this.addFiles(e.target.files); 58 | } 59 | } -------------------------------------------------------------------------------- /public/test-svg/bear.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | :warning: This project is archived and the repository is no longer maintained. 2 | 3 | # Grumpicon! 4 | 5 | ``` 6 | /' 7 | // 8 | . // 9 | |\//7 10 | /' " \ 11 | . Õ~Õ 12 | | ( \ 13 | _ _ - -_ | '._ ' 14 | _ __ _- \_ _/ \'-' 15 | // \\_/ 16 | \\ | | 17 | || | / 18 | / | \ / 19 | |VV ||--\__________/-||-/| 20 | || || || || 21 | { } { } { }{ } 22 | 23 | ``` 24 | 25 | ## A web app for Grunticon, a mystical CSS icon solution. 26 | 27 | [![Filament Group](http://filamentgroup.com/images/fg-logo-positive-sm-crop.png) ](http://www.filamentgroup.com/) 28 | 29 | ### Getting Started 30 | 31 | To use, check out http://www.grumpicon.com 32 | 33 | ### Running Locally 34 | 35 | 1. Clone repository: `git clone https://github.com/filamentgroup/grunticon-app` 36 | 2. Install Dependencies: `npm install` 37 | 3. Build the project: `grunt` 38 | 4. Create a virtual host to run from the root directory 39 | 5. Open the local url in your browser. 40 | 6. Drag svgs into the app 41 | 42 | You can also run Grunticon from the command line as part of a Grunt.js build process. More documentation is available on the [Grunticon task page](https://github.com/filamentgroup/grunticon/). 43 | 44 | ### Known Issues 45 | 46 | - In Safari, the file you download is titled "Unknown." This can have ".zip" added to it and still function. This is because of Safari's lack of support for the download attribute on links (IE is also missing this attribute). 47 | -------------------------------------------------------------------------------- /public/test-svg/bear.colors-blue-primary-aa0000.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | -------------------------------------------------------------------------------- /public/js/preview/results-view.js: -------------------------------------------------------------------------------- 1 | import _ from "underscore"; 2 | import BaseView from "./../base/base-view"; 3 | import CSSPreviewView from "./css-preview-view.js"; 4 | import HTMLPreviewView from "./html-preview-view.js"; 5 | import Handlebars from "handlebars"; 6 | import template from "./../templates.js"; 7 | 8 | var JST = template.call(window, Handlebars); 9 | 10 | /** 11 | * File previews for content available to download 12 | */ 13 | export default class ResultsView extends BaseView { 14 | initialize(options) { 15 | this.template = JST["templates/file-previews.html"] 16 | this.config = options.config; 17 | 18 | this.listenTo(this.collection, "processed remove change", this.render); 19 | } 20 | 21 | /** 22 | * render the view and all the sub view 23 | * @return {[type]} [description] 24 | */ 25 | render() { 26 | var config = this.config; 27 | var collection = this.collection; 28 | var embedText = JST["node_modules/grunt-grunticon/example/output/grunticon.loader.js"](); 29 | 30 | super.render(); 31 | 32 | new CSSPreviewView({ 33 | el: "#svg-css-results", 34 | datauri: function() { 35 | return this.get("svgDataUri"); 36 | }, 37 | collection, 38 | config 39 | }); 40 | 41 | new CSSPreviewView({ 42 | el: "#png-css-results", 43 | datauri: function() { 44 | return this.get("pngDataUri"); 45 | }, 46 | collection, 47 | config 48 | }); 49 | 50 | new CSSPreviewView({ 51 | el: "#fallback-css-results", 52 | datauri: function() { 53 | return `${config.get("pngpath")}/${this.get("name")}.png`; 54 | }, 55 | collection, 56 | config 57 | }); 58 | 59 | this.$el.find("#js-results").html(embedText); 60 | 61 | new HTMLPreviewView({ 62 | el: "#preview-html", 63 | embedText, 64 | collection, 65 | config 66 | }); 67 | 68 | } 69 | 70 | getTemplateData() { 71 | return this.config.toJSON(); 72 | } 73 | } -------------------------------------------------------------------------------- /public/js/app.js: -------------------------------------------------------------------------------- 1 | import $ from "jquery"; 2 | import _ from "underscore"; 3 | import Backbone from "backbone"; 4 | import ToggleView from "./base/toggle-view.js"; 5 | import ConfigModel from "./config/config-model.js"; 6 | import ConfigView from "./config/config-view.js"; 7 | import DownloadButtonView from "./download/download-button-view.js"; 8 | import DownloadView from "./download/download-view.js"; 9 | import CountView from "./preview/count-view.js"; 10 | import ListView from "./preview/list-view.js"; 11 | import ResultsView from "./preview/results-view.js"; 12 | import SvgCollection from "./svgs/svg-collection.js"; 13 | import UploadView from "./svgs/upload-view.js"; 14 | 15 | // set jQuery on Backbone 16 | Backbone.$ = $; 17 | 18 | $(() => { 19 | 20 | if ( Modernizr.blobconstructor ) { 21 | var config = new ConfigModel(); 22 | var collection = new SvgCollection([], { 23 | config: config 24 | }); 25 | 26 | new ConfigView({ 27 | el: "#prefs", 28 | model: config 29 | }); 30 | 31 | new UploadView({ 32 | el: document, 33 | collection 34 | }); 35 | 36 | new ToggleView({ 37 | el: ".wat", 38 | content: ".wat-it-is" 39 | }); 40 | 41 | new ToggleView({ 42 | el: ".prefs", 43 | content: "#prefs" 44 | }); 45 | 46 | new ToggleView({ 47 | el: ".see-previews", 48 | content: "#file-previews" 49 | }); 50 | 51 | new ResultsView({ 52 | el: "#file-previews", 53 | collection, 54 | config 55 | }); 56 | 57 | new ListView({ 58 | el: "#svg-icons-results", 59 | collection 60 | }); 61 | 62 | new CountView({ 63 | el: "#results-count", 64 | collection 65 | }); 66 | 67 | new DownloadView({ 68 | el: "#results", 69 | collection 70 | }); 71 | 72 | new DownloadButtonView({ 73 | el: "#download-btn", 74 | collection, 75 | config 76 | }); 77 | 78 | } else { 79 | alert("requires netscape 6.2 or higher"); 80 | } 81 | }); -------------------------------------------------------------------------------- /templates/preferences.html: -------------------------------------------------------------------------------- 1 |

datasvgcss

2 |

datapngcss

3 |

urlpngcss

4 |

previewhtml

5 |

loadersnippet

6 |

customselectors

7 |

cssprefix

8 |

colors*

9 |

dynamicColorOnly

10 |

pngfolder

11 |

pngpath

12 | 13 |

14 | 15 | template 16 | 17 | 18 | 19 |

20 | 21 | {{#if fromStorage }} 22 |

Grumpiconfig saved in localStorage. Reset to factory setting.

23 | {{/if}} 24 | 25 |

See the grunticon options for the deets.

26 |

* colors must be set before dropping SVGs.

27 | 28 | Close -------------------------------------------------------------------------------- /public/js/download/download-button-view.js: -------------------------------------------------------------------------------- 1 | import DownloadView from "./download-view.js"; 2 | import Handlebars from "handlebars"; 3 | import template from "./../templates.js"; 4 | import JSZip from "jszip"; 5 | import _ from "underscore"; 6 | import $ from "jquery"; 7 | 8 | var JST = template.call(window, Handlebars); 9 | 10 | const PNG_URI_PREFIX = "data:image/png;base64,"; 11 | const ZIP_URI_PREFIX = "data:application/zip;base64,"; 12 | 13 | /** 14 | * create a zip file and attach it to the download button 15 | */ 16 | export default class DownloadButtonView extends DownloadView { 17 | initialize(options) { 18 | this.config = options.config; 19 | super.initialize(); 20 | 21 | this.listenTo(this.config, "change", this.render); 22 | } 23 | 24 | render() { 25 | var data = this.config.toJSON(); 26 | var zip = new JSZip(); 27 | var pngs = zip.folder(data.pngfolder); 28 | var $link = this.$el.find( "#download" ); 29 | 30 | if (this.collection.length) { 31 | 32 | // add each fallback png to the png folder 33 | this.collection.each(model => { 34 | pngs.file(model.get("name") + ".png", 35 | model.get("pngDataUri").replace(PNG_URI_PREFIX, "") + "\n", 36 | {base64: true}); 37 | }); 38 | 39 | // get the file previews and save them as actual files in the zip 40 | zip.file(data.datasvgcss, $("#svg-css-results").text()); 41 | zip.file(data.datapngcss, $("#png-css-results").text()); 42 | zip.file(data.urlpngcss, $("#fallback-css-results").text()); 43 | zip.file(data.loadersnippet, $("#js-results").text()); 44 | zip.file("preview.html", _.unescape($("#preview-html").html())); 45 | 46 | if( Modernizr.adownload && ( window.URL && window.URL.createObjectURL ) ){ 47 | let blob = zip.generate({ type: "blob" }); 48 | 49 | $link.attr({ 50 | href: window.URL.createObjectURL(blob), 51 | download: "grunticon.zip" 52 | }); 53 | } else { 54 | let blob = zip.generate(); 55 | 56 | $link.on("click", e => { 57 | e.preventDefault(); 58 | location.href = ZIP_URI_PREFIX + blob; 59 | }); 60 | } 61 | 62 | this.$el.fadeIn(); 63 | } 64 | } 65 | } -------------------------------------------------------------------------------- /public/test-svg/map.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 34 | -------------------------------------------------------------------------------- /public/js/config/config-model.js: -------------------------------------------------------------------------------- 1 | import {Model} from "backbone"; 2 | import _ from "underscore"; 3 | 4 | /** 5 | * A model that stores all of the grumpiconfigs 6 | */ 7 | export default class ConfigModel extends Model { 8 | /* config from grunticon */ 9 | defaults() { 10 | return { 11 | datasvgcss: "icons.data.svg.css", 12 | datapngcss: "icons.data.png.css", 13 | urlpngcss: "icons.fallback.css", 14 | /*files: { 15 | loader: path.join( __dirname, 'grunticon', 'static', 'grunticon.loader.js'), 16 | embed: path.join( __dirname, 'grunticon', 'static', 'grunticon.embed.js'), 17 | corsEmbed: path.join( __dirname, 'grunticon', 'static', 'grunticon.embed.cors.js'), 18 | banner: path.join( __dirname, 'grunticon', 'static', 'grunticon.loader.banner.js') 19 | },*/ 20 | previewhtml: "preview.html", 21 | loadersnippet: "grunticon.loader.js", 22 | //cssbasepath: path.sep, 23 | customselectors: {}, 24 | cssprefix: ".icon-", 25 | //defaultWidth: "400px", 26 | //defaultHeight: "300px", 27 | colors: {}, 28 | dynamicColorOnly: false, 29 | pngfolder: "png", 30 | pngpath: "png", 31 | template: `{{#each customselectors}}{{this}},{{/each}} 32 | {{prefix}}{{name}} { 33 | background-image: url('{{datauri}}'); 34 | background-repeat: no-repeat; 35 | }` 36 | //tmpPath: os.tmpDir(), 37 | //tmpDir: "grunticon-tmp", 38 | //previewTemplate: path.join( __dirname, "..", "example", "preview.hbs" ), 39 | //compressPNG: false, 40 | //optimizationLevel: 3, 41 | //enhanceSVG: false, 42 | //corsEmbed: false 43 | }; 44 | } 45 | 46 | /** 47 | * extend the defaults with the data store in localStorage 48 | * @return {[type]} [description] 49 | */ 50 | initialize() { 51 | this.set(_.extend(this.defaults(), this.getLocalStorage())); 52 | } 53 | 54 | /** 55 | * save off the whole model to localStorage 56 | */ 57 | setLocalStorage() { 58 | this.set("fromStorage", true); 59 | localStorage.setItem("grumpiconfig", JSON.stringify(this.toJSON())); 60 | } 61 | 62 | /** 63 | * retrieve the model from localStorage 64 | * @return {Object} The model's data 65 | */ 66 | getLocalStorage() { 67 | var config = localStorage.getItem("grumpiconfig") || "{}"; 68 | config = JSON.parse(config); 69 | 70 | this.set("fromStorage", !_.isEmpty(config)); 71 | 72 | return config; 73 | } 74 | 75 | /** 76 | * clear from localStorage 77 | */ 78 | removeLocalStorage() { 79 | localStorage.removeItem("grumpiconfig"); 80 | } 81 | 82 | /** 83 | * reset the model 84 | */ 85 | setToDefault() { 86 | this.set(this.defaults()); 87 | this.set("fromStorage", false); 88 | this.removeLocalStorage(); 89 | } 90 | } -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = function(grunt) { 3 | "use strict"; 4 | 5 | var to5ify = require("6to5ify"); 6 | 7 | // Project configuration. 8 | grunt.initConfig({ 9 | jshint: { 10 | options: { 11 | jshintrc: ".jshintrc" 12 | }, 13 | gruntfile: { 14 | src: "Gruntfile.js" 15 | }, 16 | lib: { 17 | src: ["lib/**/*.js"] 18 | }, 19 | test: { 20 | src: ["test/**/*.js"] 21 | } 22 | }, 23 | handlebars: { 24 | compile: { 25 | files: { 26 | "public/js/templates.js": [ 27 | "templates/**/*", 28 | "node_modules/grunt-grunticon/example/**.hbs", 29 | "node_modules/grunt-grunticon/example/output/grunticon.loader.js" 30 | ] 31 | }, 32 | options: { 33 | commonjs: true 34 | } 35 | } 36 | }, 37 | modernizr: { 38 | build: { 39 | devFile: "public/lib/modernizr/modernizr.js", 40 | outputFile: "public/js/modernizr.js", 41 | parseFiles: false, 42 | tests: [ 43 | "a_download", 44 | "blob-constructor", 45 | "draganddrop", 46 | "file_api" 47 | ] 48 | } 49 | }, 50 | cssmin: { 51 | build: { 52 | files: { 53 | "public/dist/main.css": ["public/css/main.css"] 54 | } 55 | } 56 | }, 57 | browserify: { 58 | build: { 59 | files: { 60 | "public/dist/grumpicon.js": "public/js/app.js" 61 | }, 62 | options: { 63 | basedir: "public/js/", 64 | transform: [to5ify] 65 | } 66 | } 67 | }, 68 | uglify: { 69 | build: { 70 | files: { 71 | "public/dist/grumpicon.min.js": "public/dist/grumpicon.js" 72 | } 73 | } 74 | }, 75 | watch: { 76 | gruntfile: { 77 | files: "<%= jshint.gruntfile.src %>", 78 | tasks: ["jshint:gruntfile"] 79 | }, 80 | lib: { 81 | files: "<%= jshint.lib.src %>", 82 | tasks: ["jshint:lib"] 83 | }, 84 | pub: { 85 | files: ["public/js/**/*.js", "!public/js/grunticon-ui.min.js"], 86 | tasks: [ "default" ] 87 | }, 88 | test: { 89 | files: "<%= jshint.test.src %>", 90 | tasks: ["jshint:test"] 91 | } 92 | } 93 | }); 94 | 95 | // These plugins provide necessary tasks. 96 | grunt.loadNpmTasks("grunt-contrib-jshint"); 97 | grunt.loadNpmTasks("grunt-contrib-handlebars"); 98 | grunt.loadNpmTasks("grunt-modernizr"); 99 | grunt.loadNpmTasks("grunt-contrib-cssmin"); 100 | grunt.loadNpmTasks("grunt-contrib-uglify"); 101 | grunt.loadNpmTasks("grunt-browserify"); 102 | grunt.loadNpmTasks("grunt-contrib-watch"); 103 | 104 | // Default task. 105 | grunt.registerTask("default", ["jshint", "handlebars:compile", "browserify:build", "uglify", "cssmin"]); 106 | grunt.registerTask( "stage", ["default"] ); 107 | 108 | }; 109 | -------------------------------------------------------------------------------- /public/js/svgs/svg-model.js: -------------------------------------------------------------------------------- 1 | import * as $ from "jquery"; 2 | import {Model} from "backbone"; 3 | import readFile from "./../utils/readFile.js"; 4 | import createImage from "./../utils/createImage.js"; 5 | 6 | const SVG_TAG = /(]+>)/im; 7 | const SVG_URI_PREFIX = "data:image/svg+xml;charset=US-ASCII,"; 8 | 9 | /** 10 | * a model that represents each dropped file 11 | * it creates the data uris 12 | */ 13 | export default class FileModel extends Model { 14 | initialize(options) { 15 | this.processFile() 16 | .then(() => this.collection.trigger("processed")); 17 | 18 | // set an id for the preview templates 19 | this.set("id", this.cid); 20 | 21 | this.listenTo(this.collection.config, "change:customselectors", this.calcSelectors); 22 | } 23 | 24 | /** 25 | * read the file and create data uris 26 | * @return {Promise} a Promise that will resolve once the read is done 27 | */ 28 | processFile() { 29 | var file = this.get("file"); 30 | 31 | return readFile(file) 32 | .then(uri => this.addColor(uri)) 33 | .then(uri => { 34 | let svgDataUri = SVG_URI_PREFIX + escape(uri); 35 | this.set({ svgDataUri }); 36 | return svgDataUri; 37 | }) 38 | .then(createImage) 39 | .then(img => this.drawSvgOnCanvas(img)) 40 | .then(canvas => { 41 | let pngDataUri = canvas.toDataURL(); 42 | this.set({ pngDataUri }); 43 | }) 44 | .then(() => this.calcSelectors()); 45 | } 46 | 47 | /** 48 | * if there was a color option, then bake that into the svg via CSS 49 | * @param {string} uri the modified string value of the SVG 50 | */ 51 | addColor(uri) { 52 | var color = this.get("color"); 53 | 54 | if (color) { 55 | uri = uri.replace(SVG_TAG, `$1`); 56 | } 57 | 58 | return uri; 59 | } 60 | 61 | /** 62 | * draw the SVG on a canvas 63 | * @param {Image} img The SVG 64 | * @return {Canvas} The canvas with the SVG drawn on it 65 | */ 66 | drawSvgOnCanvas(img) { 67 | var width = img.width || 30; 68 | var height = img.height || 30; 69 | var canvas = document.createElement("canvas"); 70 | var context = canvas.getContext("2d"); 71 | 72 | this.set({ width, height }); 73 | 74 | canvas.width = width; 75 | canvas.height = height; 76 | 77 | context.drawImage(img, 0, 0); 78 | 79 | return canvas; 80 | } 81 | 82 | /** 83 | * calculate the CSS selector for the icon 84 | */ 85 | calcSelectors() { 86 | var customselectors = this.collection.config.get("customselectors"); 87 | var name = this.get("name"); 88 | var selectors = []; 89 | 90 | if (customselectors[name]) { 91 | selectors = customselectors[name]; 92 | } 93 | 94 | this.set({ selectors }); 95 | } 96 | } -------------------------------------------------------------------------------- /public/test-svg/gradients-flat-opacity.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 53 | -------------------------------------------------------------------------------- /public/test-svg/gradients.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 59 | -------------------------------------------------------------------------------- /public/test-svg/gear.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 53 | -------------------------------------------------------------------------------- /public/js/utils/colorfy.js: -------------------------------------------------------------------------------- 1 | //Copy of colory.js from directory-colorfy with Node stuff stripped out 2 | 3 | var colorsRegx = /\.colors\-([^\.]+)/i; 4 | 5 | var isColorWord = function( val ){ 6 | var acceptable = ["black","silver","gray","white","maroon","red","purple","fuchsia","green","lime","olive","yellow","navy","blue","teal","aqua","aliceblue","antiquewhite","aqua","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brown","burlywood","cadetblue","chartreuse","chocolate","coral","cornflowerblue","cornsilk","crimson","cyan","darkblue","darkcyan","darkgoldenrod","darkgray","darkgreen","darkgrey","darkkhaki","darkmagenta","darkolivegreen","darkorange","darkorchid","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkslategrey","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dimgrey","dodgerblue","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","ghostwhite","gold","goldenrod","gray","green","greenyellow","grey","honeydew","hotpink","indianred","indigo","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgoldenrodyellow","lightgray","lightgreen","lightgrey","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslategray","lightslategrey","lightsteelblue","lightyellow","lime","limegreen","linen","magenta","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurple","mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose","moccasin","navajowhite","navy","oldlace","olive","olivedrab","orange","orangered","orchid","palegoldenrod","palegreen","paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","red","rosybrown","royalblue","saddlebrown","salmon","sandybrown","seagreen","seashell","sienna","silver","skyblue","slateblue","slategray","slategrey","snow","springgreen","steelblue","tan","teal","thistle","tomato","turquoise","violet","wheat","white","whitesmoke","yellow","yellowgreen"]; 7 | return acceptable.indexOf( val ) > -1; 8 | }; 9 | // test if value is a valid hex 10 | var isHex = function( val ){ 11 | return (/^[0-9a-f]{3}(?:[0-9a-f]{3})?$/i).test( val ); 12 | }; 13 | 14 | 15 | var Colorfy = function( filepath, extraColors, opts ){ 16 | opts = opts || {}; 17 | 18 | var colors = this._getColorConfig( filepath, extraColors ); 19 | 20 | //this.originalContents = fs.readFileSync( filepath ).toString( 'utf-8' ); 21 | this.originalFilepath = filepath.replace( colorsRegx, "" ); 22 | //this.originalFilename = path.basename( this.originalFilepath ); 23 | //this.ofnNoExt = path.basename( this.originalFilepath, path.extname(this.originalFilepath) ); 24 | this.filepath = filepath; 25 | this.extraColors = extraColors; 26 | this.colors = colors; 27 | this.colornames = Object.keys(this.colors); 28 | this.colorFiles = {}; 29 | this.dynamicColorOnly = opts.dynamicColorOnly; 30 | }; 31 | 32 | /*Colorfy.prototype.writeFiles = function( destFolder ){ 33 | destFolder = destFolder || ""; 34 | var filesWritten = []; 35 | 36 | if( !fs.existsSync( destFolder ) ){ 37 | fs.mkdirpSync( destFolder ); 38 | } 39 | if (this.dynamicColorOnly !== true) { 40 | fs.writeFileSync( path.join( destFolder, this.originalFilename ), this.originalContents ); 41 | } 42 | 43 | for (var filepath in this.colorFiles) { 44 | if (this.colorFiles.hasOwnProperty(filepath)) { 45 | fs.writeFileSync( path.join( destFolder, filepath ), this.colorFiles[ filepath ] ); 46 | filesWritten.push( path.join( destFolder, filepath ) ); 47 | } 48 | } 49 | 50 | return filesWritten; 51 | }; 52 | 53 | Colorfy.prototype.convert = function(){ 54 | var self = this; 55 | var color = "", 56 | newFilePath = "", 57 | newFilename = ""; 58 | var promises = []; 59 | return new RSVP.Promise( function( resolve, reject ){ 60 | for( var name in self.colors ){ 61 | if( self.colors.hasOwnProperty(name) ){ 62 | color = self.colors[name]; 63 | newFilePath = path.join( path.dirname( self.originalFilepath ), self.ofnNoExt + "-" + name + path.extname( self.originalFilepath ) ); 64 | newFilename = path.basename( newFilePath ); 65 | promises.push(self._getNewFileContents( newFilename, color )); 66 | } 67 | } 68 | 69 | RSVP.all(promises).then(function(contents){ 70 | contents.forEach(function(newFile){ 71 | var key = Object.keys( newFile )[0]; 72 | self.colorFiles[ key ] = newFile[ key ]; 73 | }); 74 | resolve(self); 75 | }) 76 | .catch(function(err){ 77 | reject(err); 78 | }); 79 | }); 80 | }; 81 | 82 | Colorfy.prototype._getNewFileContents = function( name, color ){ 83 | var self = this; 84 | return new RSVP.Promise(function(resolve, reject){ 85 | 86 | execFile( phantomJsPath, 87 | [ 88 | phantomfile, 89 | encodeURI(self.originalContents), 90 | name, 91 | color 92 | ], 93 | function(err, stdout, stderr){ 94 | var svg = ""; 95 | if( err ){ 96 | process.stderr.write( stderr + "\n"); 97 | reject( err ); 98 | } 99 | svg = JSON.parse(decodeURI(stdout)); 100 | resolve( svg ); 101 | } 102 | ); 103 | }); 104 | };*/ 105 | 106 | Colorfy.prototype._getColorConfig = function( str, extraColors ){ 107 | extraColors = extraColors || {}; 108 | 109 | var colors = str.match( colorsRegx ), colorObj = {}; 110 | 111 | if( colors ){ 112 | colors = colors[ 1 ].split( "-" ); 113 | colors.forEach( function( color, i ){ 114 | if( extraColors[ color ] ){ 115 | colorObj[ color ] = extraColors[ color ]; 116 | } else if( isHex( color ) ){ 117 | colorObj[ i ] = "#" + color; 118 | } else if( isColorWord( color ) ){ 119 | colorObj[ color ] = color; 120 | } 121 | }); 122 | return colorObj; 123 | } 124 | else { 125 | return colorObj; 126 | } 127 | }; //getColorConfig 128 | 129 | 130 | 131 | module.exports = Colorfy; 132 | 133 | 134 | -------------------------------------------------------------------------------- /public/test-svg/gummy-bears-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/test-svg/gummy-bears-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/js/modernizr.js: -------------------------------------------------------------------------------- 1 | /* Modernizr (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-a_download-blob-constructor-draganddrop-file_api-shiv-load-cssclasses 3 | */ 4 | ;window.Modernizr=function(e,t,n){function E(e){f.cssText=e}function S(e,t){return E(prefixes.join(e+";")+(t||""))}function x(e,t){return typeof e===t}function T(e,t){return!!~(""+e).indexOf(t)}function N(e,t,r){for(var i in e){var s=t[e[i]];if(s!==n)return r===!1?e[i]:x(s,"function")?s.bind(r||t):s}return!1}var r="2.7.1",i={},s=!0,o=t.documentElement,u="modernizr",a=t.createElement(u),f=a.style,l,c={}.toString,h={},p={},d={},v=[],m=v.slice,g,y=function(){function r(r,i){i=i||t.createElement(e[r]||"div"),r="on"+r;var s=r in i;return s||(i.setAttribute||(i=t.createElement("div")),i.setAttribute&&i.removeAttribute&&(i.setAttribute(r,""),s=x(i[r],"function"),x(i[r],"undefined")||(i[r]=n),i.removeAttribute(r))),i=null,s}var e={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return r}(),b={}.hasOwnProperty,w;!x(b,"undefined")&&!x(b.call,"undefined")?w=function(e,t){return b.call(e,t)}:w=function(e,t){return t in e&&x(e.constructor.prototype[t],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(t){var n=this;if(typeof n!="function")throw new TypeError;var r=m.call(arguments,1),i=function(){if(this instanceof i){var e=function(){};e.prototype=n.prototype;var s=new e,o=n.apply(s,r.concat(m.call(arguments)));return Object(o)===o?o:s}return n.apply(t,r.concat(m.call(arguments)))};return i}),h.draganddrop=function(){var e=t.createElement("div");return"draggable"in e||"ondragstart"in e&&"ondrop"in e};for(var C in h)w(h,C)&&(g=C.toLowerCase(),i[g]=h[C](),v.push((i[g]?"":"no-")+g));return i.addTest=function(e,t){if(typeof e=="object")for(var r in e)w(e,r)&&i.addTest(r,e[r]);else{e=e.toLowerCase();if(i[e]!==n)return i;t=typeof t=="function"?t():t,typeof s!="undefined"&&s&&(o.className+=" "+(t?"":"no-")+e),i[e]=t}return i},E(""),a=l=null,function(e,t){function c(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x",r.insertBefore(n.lastChild,r.firstChild)}function h(){var e=y.elements;return typeof e=="string"?e.split(" "):e}function p(e){var t=f[e[u]];return t||(t={},a++,e[u]=a,f[a]=t),t}function d(e,n,r){n||(n=t);if(l)return n.createElement(e);r||(r=p(n));var o;return r.cache[e]?o=r.cache[e].cloneNode():s.test(e)?o=(r.cache[e]=r.createElem(e)).cloneNode():o=r.createElem(e),o.canHaveChildren&&!i.test(e)&&!o.tagUrn?r.frag.appendChild(o):o}function v(e,n){e||(e=t);if(l)return e.createDocumentFragment();n=n||p(e);var r=n.frag.cloneNode(),i=0,s=h(),o=s.length;for(;i",o="hidden"in e,l=e.childNodes.length==1||function(){t.createElement("a");var e=t.createDocumentFragment();return typeof e.cloneNode=="undefined"||typeof e.createDocumentFragment=="undefined"||typeof e.createElement=="undefined"}()}catch(n){o=!0,l=!0}})();var y={elements:r.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:n,shivCSS:r.shivCSS!==!1,supportsUnknownElements:l,shivMethods:r.shivMethods!==!1,type:"default",shivDocument:g,createElement:d,createDocumentFragment:v};e.html5=y,g(t)}(this,t),i._version=r,i.hasEvent=y,o.className=o.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(s?" js "+v.join(" "):""),i}(this,this.document),function(e,t,n){function r(e){return"[object Function]"==d.call(e)}function i(e){return"string"==typeof e}function s(){}function o(e){return!e||"loaded"==e||"complete"==e||"uninitialized"==e}function u(){var e=v.shift();m=1,e?e.t?h(function(){("c"==e.t?k.injectCss:k.injectJs)(e.s,0,e.a,e.x,e.e,1)},0):(e(),u()):m=0}function a(e,n,r,i,s,a,f){function l(t){if(!d&&o(c.readyState)&&(w.r=d=1,!m&&u(),c.onload=c.onreadystatechange=null,t)){"img"!=e&&h(function(){b.removeChild(c)},50);for(var r in T[n])T[n].hasOwnProperty(r)&&T[n][r].onload()}}var f=f||k.errorTimeout,c=t.createElement(e),d=0,g=0,w={t:r,s:n,e:s,a:a,x:f};1===T[n]&&(g=1,T[n]=[]),"object"==e?c.data=n:(c.src=n,c.type=e),c.width=c.height="0",c.onerror=c.onload=c.onreadystatechange=function(){l.call(this,g)},v.splice(i,0,w),"img"!=e&&(g||2===T[n]?(b.insertBefore(c,y?null:p),h(l,f)):T[n].push(c))}function f(e,t,n,r,s){return m=0,t=t||"j",i(e)?a("c"==t?E:w,e,t,this.i++,n,r,s):(v.splice(this.i++,0,e),1==v.length&&u()),this}function l(){var e=k;return e.loader={load:f,i:0},e}var c=t.documentElement,h=e.setTimeout,p=t.getElementsByTagName("script")[0],d={}.toString,v=[],m=0,g="MozAppearance"in c.style,y=g&&!!t.createRange().compareNode,b=y?c:p.parentNode,c=e.opera&&"[object Opera]"==d.call(e.opera),c=!!t.attachEvent&&!c,w=g?"object":c?"script":"img",E=c?"script":w,S=Array.isArray||function(e){return"[object Array]"==d.call(e)},x=[],T={},N={timeout:function(e,t){return t.length&&(e.timeout=t[0]),e}},C,k;k=function(e){function t(e){var e=e.split("!"),t=x.length,n=e.pop(),r=e.length,n={url:n,origUrl:n,prefixes:e},i,s,o;for(s=0;si{font-size:1.4em;position:absolute;top:6.8em;width:4em;height:4em;border-radius:100%;background:#000;left:4.5em;-webkit-backface-visibility:hidden;-webkit-perspective:1000}.logo>i>i{font-size:1em;position:absolute;top:.5em;width:3em;height:3em;border-radius:100%;background:#00f;left:.5em}.logo>i>i>i{position:absolute;top:.5em;width:1em;height:1em;border-radius:100%;background:#ff0;left:.5em;border:solid .5em red}@-moz-keyframes blinkout{0%{opacity:1}1%,2%{opacity:0;position:absolute;left:-999px;display:none}3%{opacity:1}}@-o-keyframes blinkout{0%{opacity:1}1%,2%{opacity:0}3%{opacity:1}}@-webkit-keyframes blinkout{0%{opacity:1}1%,2%{opacity:0}3%{opacity:1}}@-ms-keyframes blinkout{0%{opacity:1}1%,2%{opacity:0}3%{opacity:1}}@keyframes blinkout{0%{opacity:1}1%,2%{opacity:0}3%{opacity:1}}.logo .one,.logo .three,.logo .two{position:absolute}.logo .one,.logo .three{position:absolute;top:6.5625em}.logo .one{-webkit-animation:blinkout 5s infinite;-moz-animation:blinkout 5s infinite;-ms-animation:blinkout 5s infinite;-o-animation:blinkout 5s infinite;animation:blinkout 5s infinite}@-moz-keyframes blinkin{0%{opacity:0}1%,2%{opacity:1}3%{opacity:0}}@-o-keyframes blinkin{0%{opacity:0}1%,2%{opacity:1}3%{opacity:0}}@-webkit-keyframes blinkin{0%{opacity:0}1%,2%{opacity:1}3%{opacity:0}}@-ms-keyframes blinkin{0%{opacity:0}1%,2%{opacity:1}3%{opacity:0}}@keyframes blinkin{0%{opacity:0}1%,2%{opacity:1}3%{opacity:0}}.logo .three{opacity:0;margin-top:.2em;-webkit-animation:blinkin 5s infinite;-moz-animation:blinkin 5s infinite;-ms-animation:blinkin 5s infinite;-o-animation:blinkin 5s infinite;animation:blinkin 5s infinite}.instructions{text-align:center;font-size:1.8em;background-image:url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2016.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246.753px%22%20height%3D%2266.234px%22%20viewBox%3D%220%200%2046.753%2066.234%22%20enable-background%3D%22new%200%200%2046.753%2066.234%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M37.1%2C57.272%0D%0A%09c-1.077-21.275-16.541-34.158-24.017-46.09%22/%3E%0D%0A%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M22.253%2C9.475c-2.547%2C0-10.835-2.749-12.808-0.005%0D%0A%09C7.225%2C12.561%2C8.28%2C22.578%2C8.28%2C28.252%22/%3E%0D%0A%3C/svg%3E%0D%0A');background-position:right top;background-repeat:no-repeat;padding-right:1em;width:60%;margin:0 auto;padding-top:1em;overflow:visible}.click-2-upload{display:block;font-size:85%;text-align:center}.by{font-family:arial,san-serif;font-size:.8em;color:#ccc;padding:1.5em 0;background-color:#888;margin-top:9em;text-align:center;margin-left:-1em}.fg a{display:block;margin:.5em 0 0}.fg a img{margin:0;height:30px}.witheric{color:#eee;display:block;margin-top:.8em}.dragover{background:rgba(0,0,0,.1)}.drop-note{display:none}.issues,.wat{position:absolute;top:0;font-family:'Patua One',cursive}.wat{left:2em}.issues{right:2em}.wat-it-is{background:#e9e9e9;display:none;color:#444;margin:1em 0;padding:1em 0;border:solid #ddd 1px;line-height:1.4em;border-radius:2px}.wat-it-is p{padding:.5em 1.25em;margin:0}#prefs .close,.wat-it-is .close{float:right;margin-top:-1em;padding-right:1em}.see-previews{text-align:right}.dragover .drop-note{position:absolute;bottom:0;left:0;display:block;width:100%;background-color:rgba(0,0,0,.7);color:#fefefe;font-size:1.2em;text-align:center;padding:.1em}.dragover .drop-note h3{margin:.2em;font-weight:400}.from-storage{padding:.5em;background:#ff9;border-radius:2px;color:#660;border:1px solid #dd8}.new{color:#f763ec}#download-btn,#file-previews,#prefs,#results{display:none}pre{max-height:20em;overflow-y:scroll}.page-header{background-color:#f7f8f8;padding:.6em;margin:0 0 1em;color:#6DA242}.page-header .fg{float:right;font-size:.4em;color:#aaa;font-weight:400}.page-header .fg img{height:30px;margin:3px 0 0 5px}#upload{margin-bottom:0}#upload .container{padding:1em 0;color:#bbb}#upload h3{text-align:center;border-radius:5px;padding:1.5em;margin-top:.5em;-moz-box-shadow:inset 0 0 20px rgba(0,0,0,.18);-webkit-box-shadow:inset 0 0 20px rgba(0,0,0,.18);box-shadow:inset 0 0 20px rgba(0,0,0,.12);-webkit-transition:border-color .5s ease;-moz-transition:border-color .5s ease;transition:border-color .5s ease;color:#ccc}.dragover #upload h3{border-color:#06c}.draganddrop.blobconstructor.filereader #supported{display:none}.invalid{text-decoration:line-through;color:#666}#download-btn{margin:2em auto;text-align:center}.get-it{display:inline-block;padding:0;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 8px 0 #1a74a1,0 15px 1px rgba(0,0,0,.15);-moz-box-shadow:0 8px 0 #1a74a1,0 15px 1px rgba(0,0,0,.15);box-shadow:0 8px 0 #e036d4,0 15px 1px rgba(0,0,0,.1);-webkit-transition:-webkit-box-shadow .2s ease-in-out;-moz-transition:-moz-box-shadow .2s ease-in-out;-o-transition:-o-box-shadow .2s ease-in-out;transition:box-shadow .2s ease-in-out}.get-it span{display:inline-block;color:#fff;padding:.5em 2em;font-family:'Patua One',cursive;font-weight:400;font-size:2em;line-height:1;text-shadow:0 -1px 1px rgba(0,0,0,.3);background:#f763ec;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:inset 0 -1px 1px rgba(255,255,255,.15);-moz-box-shadow:inset 0 -1px 1px rgba(255,255,255,.15);box-shadow:inset 0 -1px 1px rgba(255,255,255,.15);-webkit-transition:-webkit-transform .15s ease-in-out;-moz-transition:-moz-transform .15s ease-in-out;-o-transition:-o-transform .15s ease-in-out;transition:transform .15s ease-in-out}.get-it:hover{-webkit-box-shadow:0 9px 0 #e036d4,0 14px 0 rgba(0,0,0,.3);-moz-box-shadow:0 8px 0 #e036d4,0 14px 0 rgba(0,0,0,.3);box-shadow:0 8px 0 #e036d4,0 14px 0 rgba(0,0,0,.1)}.get-it:hover span{-webkit-transform:translate(0,2px);-moz-transform:translate(0,2px);-o-transform:translate(0,2px);transform:translate(0,2px)}.get-it:active{-webkit-box-shadow:0 7px 0 #e036d4,0 8px 0 rgba(0,0,0,.3);-moz-box-shadow:0 7px 0 #e036d4,0 8px 0 rgba(0,0,0,.3);box-shadow:0 7px 0 #e036d4,0 8px 0 rgba(0,0,0,.1)}.get-it:active span{-webkit-transform:translate(0,6px);-moz-transform:translate(0,6px);-o-transform:translate(0,6px);transform:translate(0,6px)}#results{margin:-3em auto 0}#results-count{margin-top:5em}#svg-icons-results{margin-bottom:2em;margin-top:1em}#svg-icons-results>div{background-color:#e9e9e9;border:solid #ddd 1px;padding:.6em 1.25em;margin:0 0 2px;border-radius:2px;-webkit-transition:background-color .5s ease;-moz-transition:background-color .5s ease;transition:background-color .5s ease}#svg-icons-results>div:hover{background-color:#dedede}#svg-icons-results .meta{display:inline-block;margin:0;width:30%;padding:0;vertical-align:top;font-size:1.2em}#svg-icons-results .meta h5{margin:0;font-weight:400}#svg-icons-results .meta p{margin:.1em 0 .5em;color:#888;font-size:.7em}#svg-icons-results .close{float:right;font-size:1em;margin-top:.35em;padding-right:1em;color:#bbb;font-weight:400}#svg-icons-results img{display:inline-block;vertical-align:top}#file-previews,#prefs{background-color:#e9e9e9;border:solid #ddd 1px;padding:.6em 1.25em;margin:0 0 2px;border-radius:2px}#file-previews>pre{border:solid #ddd 1px;padding:1.75em;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}#file-previews>pre:hover{color:#f763ec}.input-box{width:50%;float:left}@media(min-width:40em){.wat-it-is{margin:2em auto;max-width:65%}.row{max-width:65%;margin:0 auto}} -------------------------------------------------------------------------------- /public/test-svg/Home_Media.svg: -------------------------------------------------------------------------------- 1 | 2 | 73 | -------------------------------------------------------------------------------- /public/test-svg/Internet_Tel.svg: -------------------------------------------------------------------------------- 1 | 2 | 52 | -------------------------------------------------------------------------------- /public/test-svg/Internet-no-width-no-height.svg: -------------------------------------------------------------------------------- 1 | 2 | 65 | -------------------------------------------------------------------------------- /public/test-svg/Internet.svg: -------------------------------------------------------------------------------- 1 | 2 | 65 | -------------------------------------------------------------------------------- /public/test-svg/Internet_FP2.svg: -------------------------------------------------------------------------------- 1 | 2 | 65 | -------------------------------------------------------------------------------- /public/test-svg/Image_Exchange.svg: -------------------------------------------------------------------------------- 1 | 2 | 91 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Grumpicon. A Web app for the Grunticon workflow. 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

20 | 21 |

 22 | 
 23 |                                /'
 24 |                               //
 25 |                           .  //
 26 |                           |\//7
 27 |                          /' " \
 28 |                         .   . .~ ~
 29 |                         | (    \
 30 |            _ _ - -_     |  '._  '
 31 |   _ __   _-         \_ _/    \'-'
 32 |  //  \\_/
 33 |  \\   |                      |
 34 |  ||   |                      /
 35 | / |    \                    /
 36 | |VV    ||--\__________/-||-/|
 37 |        ||  ||           || ||
 38 |        { } { }          { }{ }
 39 | 
 40 | 
 41 |                                /'
 42 |                               //
 43 |                           .  //
 44 |                           |\//7
 45 |                          /' " \
 46 |                         .   . .~ ~
 47 |                         | (    \
 48 |            _ _ - -_     |  '._  '
 49 |   _ __   _-         \_ _/    \'-'
 50 |  //  \\_/
 51 |  ||   |                      /
 52 |   \\   \                    /
 53 |   |VV ||--\__________/-||-/
 54 |        ||||           || ||
 55 |         \\/            \\//
 56 |        { }}           {}{ }
 57 | 
 58 | 
 59 |

60 | 61 | 62 | 63 | 64 | 65 |

Drag & Drop ur SVGs on the Grumpicon plz.

66 | Or click here 2 upload. 67 | 68 | 69 |

70 | Downlode it! 71 |

72 | 73 | 74 | 75 | 76 |

What Is This

77 |

Issues?

78 | 79 |

80 |

Grunticon makes it easy to use HD-ready (retina) vector illustrations, icons, and background images in your web project without the hassles of spotty browser compatibility. The tool processes a set of SVG files, generates PNG fallback images for legacy browsers, and exports a demo page showing how to use the final icons. Visit the GitHub repo for the command line version or to learn more about how grunticon works

81 | 82 |

To start, export SVG files for each of your images, drop those files onto the grumpy animal above, then click the 'Downlode it!" button to grab the files.

83 | 84 |

Once downloaded, check out preview.html to see a preview of your icons and their class names. To integrate in your site, you can drop the exported files into a folder on your site and paste the contents of grunticon.loader.txt into the head section of your HTML templates.

85 | 86 |

New! You can now configure things like the file names, class names, and even the colors of the generated assets. Check out the "Grumpiconfig" section.

87 | 88 | Close 89 |

90 | 91 |

92 |

Grumpiconfig

93 |

94 |

95 | 96 |

97 |

98 |

Your browser does not support all the functionality needed to run the full version of this application. It is suggested that you use the latest version of Chrome or Firefox.

99 |

100 |

101 | 102 | 103 |

104 |

105 | 106 |

107 | 108 |

109 |

110 | 111 |

Preview the files

112 | 113 |

114 |

115 |

116 |

117 |

118 | 119 |

120 |

Drop files anywhere to add them

121 |

122 | 123 | 124 |

With special guest, Eric Ponto 125 | uniconkey head drawn by R.B.Cleary in 1995

126 | 127 | 128 | 138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /public/css/main.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | font-family: 'Patua One', cursive; 5 | } 6 | body { 7 | background: #fefefe; 8 | -webkit-transition: background .5s ease; 9 | -moz-transition: background .5s ease; 10 | transition: background .5s ease; 11 | margin: 0; 12 | } 13 | a { 14 | text-decoration:none; 15 | color: #69c; 16 | -webkit-transition: color .5s ease; 17 | -moz-transition: color .5s ease; 18 | transition: color .5s ease; 19 | } 20 | a:hover, a:focus { 21 | color: #111; 22 | } 23 | 24 | label { 25 | display: inline-block; 26 | width: 135px; 27 | } 28 | 29 | textarea { 30 | width: 100%; 31 | } 32 | 33 | .logo { 34 | width: 22em; 35 | height: 21em; 36 | max-height: none; 37 | overflow: hidden; 38 | margin: 2em auto 0; 39 | font-size: 1.2em; 40 | position: relative; 41 | -webkit-animation: logoin 5s 1; 42 | -moz-animation: logoin 5s 1; 43 | -ms-animation: logoin 5s 1; 44 | -o-animation: logoin 5s 1; 45 | animation: logoin 5s 1; 46 | -webkit-backface-visibility: hidden; 47 | -webkit-perspective: 1000; 48 | } 49 | 50 | @-moz-keyframes logoin { 51 | 0% { 52 | left: -60%; } 53 | 100% { 54 | left: 0; } 55 | } 56 | @-o-keyframes logoin { 57 | 0% { 58 | left: -60%; } 59 | 100% { 60 | left: 0; } 61 | } 62 | @-webkit-keyframes logoin { 63 | 0% { 64 | left: -60%; } 65 | 100% { 66 | left: 0; } 67 | } 68 | @-ms-keyframes logoin { 69 | 0% { 70 | left: -60%; } 71 | 100% { 72 | left: 0; } 73 | } 74 | @keyframes logoin { 75 | 0% { 76 | left: -60%; } 77 | 100% { 78 | left: 0; } 79 | } 80 | @-moz-keyframes fadein { 81 | 0%,80% { 82 | opacity: 0; } 83 | 100% { 84 | opacity: 1; } 85 | } 86 | @-o-keyframes fadein { 87 | 0%,80% { 88 | opacity: 0; } 89 | 100% { 90 | opacity: 1; } 91 | } 92 | @-webkit-keyframes fadein { 93 | 0%,80% { 94 | opacity: 0; } 95 | 100% { 96 | opacity: 1; } 97 | } 98 | @-ms-keyframes fadein { 99 | 0%,80% { 100 | opacity: 0; } 101 | 100% { 102 | opacity: 1; } 103 | } 104 | @keyframes fadein { 105 | 0%,80% { 106 | opacity: 0; } 107 | 100% { 108 | opacity: 1; } 109 | } 110 | 111 | .non-essential-bs { 112 | opacity: 1; 113 | -webkit-animation: fadein 6s; 114 | -moz-animation: fadein 6s ; 115 | -ms-animation: fadein 6s; 116 | -o-animation: fadein 6s; 117 | animation: fadein 6s; 118 | -webkit-backface-visibility: hidden; 119 | -webkit-perspective: 1000; 120 | } 121 | .hup { 122 | display: block; 123 | -webkit-animation: marchhup .5s 10; 124 | -moz-animation: marchhup .5s 10; 125 | -ms-animation: marchhup .5s 10; 126 | -o-animation: marchhup .5s 10; 127 | animation: marchhup .5s 10; 128 | -webkit-backface-visibility: hidden; 129 | -webkit-perspective: 1000; 130 | } 131 | .annnnd { 132 | position: absolute; 133 | top:.5em; 134 | opacity: 0; 135 | -webkit-animation: marchaaand .5s 10; 136 | -moz-animation: marchaaand .5s 10; 137 | -ms-animation: marchaaand .5s 10; 138 | -o-animation: marchaaand .5s 10; 139 | animation: marchaaand .5s 10; 140 | -webkit-backface-visibility: hidden; 141 | -webkit-perspective: 1000; 142 | } 143 | 144 | @-moz-keyframes marchhup { 145 | 0%,49.9% { 146 | opacity: 1; 147 | } 148 | 50%,100% { 149 | opacity: 0; 150 | } 151 | } 152 | @-o-keyframes marchhup { 153 | 0%,49.9% { 154 | opacity: 1; 155 | } 156 | 50%,100% { 157 | opacity: 0; 158 | } 159 | } 160 | @-webkit-keyframes marchhup { 161 | 0%,49.9% { 162 | opacity: 1; 163 | } 164 | 50%,100% { 165 | opacity: 0; 166 | } 167 | } 168 | @-ms-keyframes marchhup { 169 | 0%,49.9% { 170 | opacity: 1; 171 | } 172 | 50%,100% { 173 | opacity: 0; 174 | } 175 | } 176 | @keyframes marchhup { 177 | 0%,49.9% { 178 | opacity: 1; 179 | } 180 | 50%,100% { 181 | opacity: 0; 182 | } 183 | } 184 | 185 | 186 | 187 | 188 | @-moz-keyframes marchaaand { 189 | 0%,49.9% { 190 | opacity: 0; 191 | } 192 | 50%,100% { 193 | opacity: 1; 194 | } 195 | } 196 | @-o-keyframes marchaaand { 197 | 0%,49.9% { 198 | opacity: 0; 199 | } 200 | 50%,100% { 201 | opacity: 1; 202 | } 203 | } 204 | @-webkit-keyframes marchaaand { 205 | 0%,49.9% { 206 | opacity: 0; 207 | } 208 | 50%,100% { 209 | opacity: 1; 210 | } 211 | } 212 | @-ms-keyframes marchaaand { 213 | 0%,49.9% { 214 | opacity: 0; 215 | } 216 | 50%,100% { 217 | opacity: 1; 218 | } 219 | } 220 | @keyframes marchaaand { 221 | 0%,49.9% { 222 | opacity: 0; 223 | } 224 | 50%,100% { 225 | opacity: 1; 226 | } 227 | } 228 | 229 | 230 | 231 | 232 | 233 | 234 | .logo>i { 235 | font-size: 1.4em; 236 | position: absolute; 237 | top: 6.8em; 238 | width: 4em; 239 | height: 4em; 240 | border-radius: 100%; 241 | background: black; 242 | left: 4.5em; 243 | -webkit-backface-visibility: hidden; 244 | -webkit-perspective: 1000; 245 | } 246 | .logo>i>i { 247 | font-size: 1em; 248 | position: absolute; 249 | top: .5em; 250 | width: 3em; 251 | height: 3em; 252 | border-radius: 100%; 253 | background: blue; 254 | left: .5em; 255 | } 256 | .logo>i>i>i { 257 | position: absolute; 258 | top: .5em; 259 | width: 1em; 260 | height: 1em; 261 | border-radius: 100%; 262 | background: yellow; 263 | left: .5em; 264 | border: solid .5em red; 265 | } 266 | 267 | 268 | @-moz-keyframes blinkout { 269 | 0% { 270 | opacity: 1; 271 | } 272 | 1%,2% { 273 | opacity: 0; 274 | position: absolute; 275 | left: -999px; 276 | display: none; 277 | } 278 | 3% { 279 | opacity: 1; 280 | } 281 | } 282 | @-o-keyframes blinkout { 283 | 0% { 284 | opacity: 1; 285 | } 286 | 1%,2% { 287 | opacity: 0; 288 | 289 | } 290 | 3% { 291 | opacity: 1; 292 | } 293 | } 294 | @-webkit-keyframes blinkout { 295 | 0% { 296 | opacity: 1; 297 | } 298 | 1%,2% { 299 | opacity: 0; 300 | 301 | } 302 | 3% { 303 | opacity: 1; 304 | } 305 | } 306 | @-ms-keyframes blinkout { 307 | 0% { 308 | opacity: 1; 309 | } 310 | 1%,2% { 311 | opacity: 0; 312 | 313 | } 314 | 3% { 315 | opacity: 1; 316 | } 317 | } 318 | @keyframes blinkout { 319 | 0% { 320 | opacity: 1; 321 | } 322 | 1%,2% { 323 | opacity: 0; 324 | 325 | } 326 | 3% { 327 | opacity: 1; 328 | } 329 | } 330 | .logo .one, 331 | .logo .two , 332 | .logo .three { 333 | position: absolute; 334 | } 335 | .logo .one, 336 | .logo .three { 337 | position: absolute; 338 | top: 6.5625em; 339 | } 340 | .logo .one { 341 | -webkit-animation: blinkout 5s infinite; 342 | -moz-animation: blinkout 5s infinite; 343 | -ms-animation: blinkout 5s infinite; 344 | -o-animation: blinkout 5s infinite; 345 | animation: blinkout 5s infinite; 346 | } 347 | 348 | 349 | @-moz-keyframes blinkin { 350 | 0% { 351 | opacity: 0; } 352 | 1%,2% { 353 | opacity: 1; } 354 | 3% { 355 | opacity: 0; } 356 | } 357 | @-o-keyframes blinkin { 358 | 0% { 359 | opacity: 0; } 360 | 1%,2% { 361 | opacity: 1; } 362 | 3% { 363 | opacity: 0; } 364 | } 365 | @-webkit-keyframes blinkin { 366 | 0% { 367 | opacity: 0; } 368 | 1%,2% { 369 | opacity: 1; } 370 | 3% { 371 | opacity: 0; } 372 | } 373 | @-ms-keyframes blinkin { 374 | 0% { 375 | opacity: 0; } 376 | 1%,2% { 377 | opacity: 1; } 378 | 3% { 379 | opacity: 0; } 380 | } 381 | @keyframes blinkin { 382 | 0% { 383 | opacity: 0; } 384 | 1%,2% { 385 | opacity: 1; } 386 | 3% { 387 | opacity: 0; 388 | } 389 | } 390 | .logo .three { 391 | opacity: 0; 392 | margin-top: .2em; 393 | -webkit-animation: blinkin 5s infinite; 394 | -moz-animation: blinkin 5s infinite; 395 | -ms-animation: blinkin 5s infinite; 396 | -o-animation: blinkin 5s infinite; 397 | animation: blinkin 5s infinite; 398 | } 399 | .instructions { 400 | text-align: center; 401 | font-size: 1.8em; 402 | background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2016.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246.753px%22%20height%3D%2266.234px%22%20viewBox%3D%220%200%2046.753%2066.234%22%20enable-background%3D%22new%200%200%2046.753%2066.234%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M37.1%2C57.272%0D%0A%09c-1.077-21.275-16.541-34.158-24.017-46.09%22/%3E%0D%0A%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M22.253%2C9.475c-2.547%2C0-10.835-2.749-12.808-0.005%0D%0A%09C7.225%2C12.561%2C8.28%2C22.578%2C8.28%2C28.252%22/%3E%0D%0A%3C/svg%3E%0D%0A'); 403 | background-position: right top; 404 | background-repeat: no-repeat; 405 | padding-right: 1em; 406 | width: 60%; 407 | margin: 0 auto; 408 | padding-top: 1em; 409 | overflow: visible; 410 | } 411 | .click-2-upload { 412 | display: block; 413 | font-size: 85%; 414 | text-align: center; 415 | } 416 | .by { 417 | font-family: arial, san-serif; 418 | font-size: .8em; 419 | color: #ccc; 420 | padding:1.5em 0; 421 | background-color: #888; 422 | margin-top: 9em; 423 | text-align: center; 424 | margin-left:-1em; 425 | } 426 | .fg a { 427 | display: block; 428 | margin: .5em 0 0; 429 | } 430 | .fg a img { 431 | margin: 0; 432 | height:30px; 433 | } 434 | .witheric { 435 | color: #eee; 436 | display: block; 437 | margin-top:.8em; 438 | } 439 | .dragover { background: rgba(0,0,0,.1) } 440 | .drop-note { 441 | display:none; 442 | } 443 | .wat, 444 | .issues { 445 | position: absolute; 446 | top: 0; 447 | font-family: 'Patua One', cursive; 448 | } 449 | .wat { 450 | left: 2em; 451 | } 452 | .issues { 453 | right: 2em; 454 | } 455 | .wat-it-is { 456 | background: #e9e9e9;; 457 | display: none; 458 | color: #444; 459 | margin: 1em 0; 460 | padding: 1em 0 1em 0; 461 | border: solid #ddd 1px; 462 | line-height: 1.4em; 463 | border-radius: 2px; 464 | } 465 | .wat-it-is p { 466 | padding: .5em 1.25em .5em 1.25em; 467 | margin: 0; 468 | } 469 | .wat-it-is .close, #prefs .close { 470 | float: right; 471 | margin-top: -1em; 472 | padding-right: 1em; 473 | } 474 | .see-previews { 475 | text-align: right; 476 | } 477 | .dragover .drop-note { 478 | position:absolute; 479 | bottom:0; 480 | left:0; 481 | display:block; 482 | width:100%; 483 | background-color:rgba(0,0,0,.7); 484 | color:#fefefe; 485 | font-size:1.2em; 486 | text-align:center; 487 | padding:.1em; 488 | } 489 | .dragover .drop-note h3 { 490 | margin:.2em; 491 | font-weight:normal; 492 | } 493 | 494 | .from-storage { 495 | padding: 0.5em; 496 | background: #ff9; 497 | border-radius: 2px; 498 | color: #660; 499 | border: 1px solid #dd8; 500 | } 501 | 502 | .new { 503 | color: #f763ec; 504 | } 505 | 506 | #file-previews, 507 | #results, 508 | #download-btn, 509 | #prefs { display: none } 510 | 511 | pre { 512 | max-height: 20em; 513 | overflow-y: scroll; 514 | } 515 | .page-header { 516 | background-color: #f7f8f8; 517 | padding:.6em; 518 | margin:0 0 1em 0; 519 | color:#6DA242; 520 | } 521 | .page-header .fg { 522 | float:right; 523 | font-size:.4em; 524 | color:#aaa; 525 | font-weight:normal; 526 | } 527 | .page-header .fg img { 528 | height:30px; 529 | margin:3px 0 0 5px; 530 | } 531 | 532 | #upload { 533 | margin-bottom:0; 534 | } 535 | #upload .container { 536 | padding: 1em 0; 537 | color:#bbb; 538 | } 539 | 540 | #upload h3 { 541 | text-align: center; 542 | border-radius: 5px; 543 | padding: 1.5em; 544 | margin-top:.5em; 545 | -moz-box-shadow: inset 0 0 20px rgba(0,0,0,.18); 546 | -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,.18); 547 | box-shadow: inset 0 0 20px rgba(0,0,0,.12); 548 | -webkit-transition: border-color .5s ease; 549 | -moz-transition: border-color .5s ease; 550 | transition: border-color .5s ease; 551 | color:#ccc; 552 | } 553 | 554 | .dragover #upload h3 { border-color: #06c } 555 | 556 | .draganddrop.blobconstructor.filereader #supported { display: none } 557 | 558 | .invalid { 559 | text-decoration: line-through; 560 | color: #666; 561 | } 562 | 563 | /* Thanks Dan Cederholm http://blog.typekit.com/2011/02/10/type-study-an-all-css-button/ */ 564 | #download-btn { 565 | margin: 2em auto; 566 | text-align: center; 567 | } 568 | .get-it { 569 | display: inline-block; 570 | padding:0; 571 | -webkit-border-radius: 8px; 572 | -moz-border-radius: 8px; 573 | border-radius: 8px; 574 | -webkit-box-shadow: 575 | 0 8px 0 #1a74a1, 576 | 0 15px 1px rgba(0,0,0,.15); 577 | -moz-box-shadow: 578 | 0 8px 0 #1a74a1, 579 | 0 15px 1px rgba(0,0,0,.15); 580 | box-shadow: 581 | 0 8px 0 #e036d4, 582 | 0 15px 1px rgba(0,0,0,.1); 583 | -webkit-transition: -webkit-box-shadow .2s ease-in-out; 584 | -moz-transition: -moz-box-shadow .2s ease-in-out; 585 | -o-transition: -o-box-shadow .2s ease-in-out; 586 | transition: box-shadow .2s ease-in-out; 587 | } 588 | .get-it span { 589 | display: inline-block; 590 | color:#fff; 591 | padding: .5em 2em; 592 | font-family: 'Patua One', cursive; 593 | font-weight:normal; 594 | font-size:2em; 595 | line-height: 1; 596 | text-shadow: 0 -1px 1px rgba(0,0,0,.3); 597 | background: #f763ec; 598 | -webkit-border-radius: 8px; 599 | -moz-border-radius: 8px; 600 | border-radius: 8px; 601 | -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15); 602 | -moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15); 603 | box-shadow: inset 0 -1px 1px rgba(255,255,255,.15); 604 | -webkit-transition: -webkit-transform .15s ease-in-out; 605 | -moz-transition: -moz-transform .15s ease-in-out; 606 | -o-transition: -o-transform .15s ease-in-out; 607 | transition: transform .15s ease-in-out; 608 | } 609 | .get-it:hover { 610 | -webkit-box-shadow: 611 | 0 9px 0 #e036d4, 612 | 0 14px 0 rgba(0,0,0,.3); 613 | -moz-box-shadow: 614 | 0 8px 0 #e036d4, 615 | 0 14px 0 rgba(0,0,0,.3); 616 | box-shadow: 617 | 0 8px 0 #e036d4, 618 | 0 14px 0 rgba(0,0,0,.1); 619 | } 620 | .get-it:hover span { 621 | -webkit-transform: translate(0, 2px); 622 | -moz-transform: translate(0, 2px); 623 | -o-transform: translate(0, 2px); 624 | transform: translate(0, 2px); 625 | } 626 | 627 | .get-it:active { 628 | -webkit-box-shadow: 629 | 0 7px 0 #e036d4, 630 | 0 8px 0 rgba(0,0,0,.3); 631 | -moz-box-shadow: 632 | 0 7px 0 #e036d4, 633 | 0 8px 0 rgba(0,0,0,.3); 634 | box-shadow: 635 | 0 7px 0 #e036d4, 636 | 0 8px 0 rgba(0,0,0,.1); 637 | } 638 | .get-it:active span { 639 | -webkit-transform: translate(0, 6px); 640 | -moz-transform: translate(0, 6px); 641 | -o-transform: translate(0, 6px); 642 | transform: translate(0, 6px); 643 | } 644 | 645 | 646 | #results { 647 | margin: -3em auto 0; 648 | } 649 | 650 | h3 { 651 | /* margin-top: 2.5em; 652 | margin-bottom:1em;*/ 653 | } 654 | 655 | #results-count { 656 | margin-top:5em; 657 | } 658 | #svg-icons-results { 659 | margin-bottom:2em; 660 | margin-top:1em; 661 | } 662 | #svg-icons-results>div { 663 | background-color:#e9e9e9; 664 | border: solid #ddd 1px; 665 | padding: .6em 1.25em .6em 1.25em; 666 | margin:0 0 2px 0; 667 | border-radius: 2px; 668 | -webkit-transition: background-color .5s ease; 669 | -moz-transition: background-color .5s ease; 670 | transition: background-color .5s ease; 671 | } 672 | #svg-icons-results>div:hover { 673 | background-color: #dedede; 674 | } 675 | #svg-icons-results .meta { 676 | display: inline-block; 677 | margin:0; 678 | width:30%; 679 | padding:0; 680 | vertical-align:top; 681 | font-size: 1.2em; 682 | } 683 | #svg-icons-results .meta h5 { 684 | margin:0; 685 | font-weight:normal; 686 | } 687 | #svg-icons-results .meta p { 688 | margin: .1em 0 .5em 0; 689 | color: #888; 690 | font-size:.7em; 691 | } 692 | #svg-icons-results .close { 693 | float: right; 694 | font-size: 1em; 695 | margin-top: .35em; 696 | padding-right: 1em; 697 | color: #bbb; 698 | font-weight:normal; 699 | } 700 | #svg-icons-results img { 701 | display: inline-block; 702 | vertical-align:top; 703 | } 704 | 705 | #file-previews, #prefs { 706 | background-color:#e9e9e9; 707 | border: solid #ddd 1px; 708 | padding: .6em 1.25em .6em 1.25em; 709 | margin:0 0 2px 0; 710 | border-radius: 2px; 711 | } 712 | 713 | #file-previews > pre { 714 | border: solid #ddd 1px; 715 | padding: 1.75em; 716 | -webkit-transition: all 0.2s ease; 717 | -moz-transition: all 0.2s ease; 718 | -ms-transition: all 0.2s ease; 719 | -o-transition: all 0.2s ease; 720 | transition: all 0.2s ease; 721 | } 722 | #file-previews > pre:hover { 723 | color: #f763ec; 724 | } 725 | 726 | .input-box { 727 | width: 50%; 728 | float: left; 729 | } 730 | 731 | 732 | /* min-width:40em */ 733 | @media(min-width:40em) { 734 | .wat-it-is { 735 | margin: 2em auto; 736 | max-width: 65%; 737 | } 738 | .row { 739 | max-width: 65%; 740 | margin: 0 auto; 741 | } 742 | 743 | } 744 | -------------------------------------------------------------------------------- /public/test-svg/Intranet.svg: -------------------------------------------------------------------------------- 1 | 2 | 49 | --------------------------------------------------------------------------------

{{ name }}

Export Preview

{{datasvgcss}}

{{datapngcss}}

{{urlpngcss}}

{{loadersnippet}}

preview.html

Drop files anywhere to add them