Use SVG elements on modern browsers with sprite fallback for IE8, just using CSS classes and some conditional JS polyfilling.
This plugin requires Grunt
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-badass --save-dev
This plugin was designed to work with Grunt 0.4.5. It will not work with v0.3.x.
Local path to a folder containing
Local path that you want all your generated files to be exported to
Each object in this array must follow this format.
filename: "camera" class: "camera-cold" w: 50 h:44 fillCol: "#4183c4" standAlone: true
#BADA55fluro green with for the fill colour.
#BADA55fluro green with for the stroke colour.
0.1ptin the svg, it will be affected by this.
A class prefix for your sprite's icons. Keep it short, as it will appear on all badass svg classes.
An id prefix for your svg elements. Keep it short, as it will appear on all badass svg ids. Will default to same as
Local path to the folder that will contain any icons marked as 'stand alone' (in each icon config you can set this with
The absolute path to your sprite, which will get embedded into your CSS or SCSS styles.
The local path you want your sprite exported to, including the name of the sprite.
Default is false. Will add compass sprite snippet to top of scss. Only change this to true if your project uses compass sprites and you want to merge badass icons into the main project sprite.
Local path to
.scssfile that contains sprite data. If using compass sprites and scss, this should be a
includeCompassSpriteStyles:trueoption should also be set.
Options for optimising your SVGs. See SVGO repo for all options - https://github.com/svg/svgo/tree/master/plugins.
Clears the specified tmp directory at the end of build, if true. Defaults to true.
An array of file names to ignore within the
src. Doesn't currently accept globbing patterns.
Adds lossy PNGQuant compression to the sprite (uses Imagemin), for roughly 70% file size savings. Defaults to
keepUncompressed: falsepngQuantSettings: quality: '80-90' speed: 1
If you don't want to generate a sprite or any PNG fallbacks, say, because you don't need ie8 support, make this
false. Defaults to true.
If you want to show the icons even when JS is turned off, you can use the handlebars template supplied in
/tasks/resources/nojs-svg.hbs, which uses a
noscriptelement to show the background sprite. It adds a bit of extra markup to the page, and is a pain if you're not using a templating language (like Handlebars), but solves the problem.
Careful: Don't change the CSS so that the sprite is shown on the
svgelement when the
.no-jsclass is shown. If you do that, the page will make a request for the sprite even if JS is enabled (in the split second before JS kicks in) and modern browsers will load a big PNG that they'll never use.
These SVGs get processed into a single js
svgloader.js, which dynamically embeds the SVG inline just after the body tag is opened.
The following markup must be placed in the markup just after the body tag is opened and must be loaded synchronously (a standard script tag is the easiest way).
<span class="svgdefs"></span><script src="/path/to/svgloader.js"></script>
Example including sprite fallback, a single standalone PNG and PNG compression switched off.
src: 'path/to/svg/directory/'dest: "path/to/output/directory/"options:cssPrefix: "bad" // sprites will take this folder name as part of class name, so keep it shortspriteUrl: "/absolute/url/to/sprite.png"spriteOutput: "local/path/to/sprite/file.png"// if 'standAlone' is marked as true, files will get copied to this directorystandAlonePngDir: "path/to/standalone/png/output/directory/"// Default is compressSprite.keepUncompressed = falsecompressSprite:keepUncompressed: truestylesOutput: "path/to/css/or/scss/output/file.css"items:filename: "camera" class: "camera-warm" w: 50 h:44 fillCol: "orange"filename: "camera" class: "camera-cold" w: 50 h:44 fillCol: "blue" standAlone: truefilename: "cloud" class: "cloud-down" w: 50 h:41 fillCol: "#999"filename: "code" class: "code-sm-bright" w: 50 h:38 fillCol: "yellow"filename: "code" class: "code-md-bright" w: 60 h:45 fillCol: "yellow"filename: "code" class: "code-lg-bright" w: 80 h:60 fillCol: "yellow"// may be useful to make this false when testing outputclearTmpDir: false
Example that disabled the sprite generation, which results in a faster build, if you don't need ie8 support. Also includes some custom SVGO options.
src: '<%= rootDir %>tests/resources/svgs/'dest: "<%= rootDir %>dist/test2/"options:cssPrefix: "bad" // sprites will take this folder name as part of class name, so keep it shortstylesOutput: "path/to/css/or/scss/output/file.css"items:filename: "camera" class: "camera-warm" w: 50 h:44 fillCol: "orange"filename: "cloud" class: "cloud-down" w: 50 h:41 fillCol: "#999"filename: "code" class: "code-sm-bright" w: 50 h:38 fillCol: "yellow"includeFallback: false // no png or sprite generationsvgoPlugins:/*** One Apache server configuration has been known to convert certain combinations of numbers into ********** asterisk characters.* Suspected cause is some kind of malware protection blocking known number sequences in viruses.* This is a very rare edge case, but if you come across it, turning off the following 'convert' plugins will fix it.* However, as this same compression is used in PDFs and Font Awesome icons, you must start with an uncompressed source, or else* it will keep happening.*/convertPathData: falseconvertStyleToAttrs: falseconvertTransform: falseconvertShapeToPath: false
A modified version of the HTML5 Shiv - https://github.com/aFarkas/html5shiv - has been included, which adds
<use> elements. This should be placed within an IE8 conditional comment. If you already have an HTML5 'shiv' or 'shim' on the page, remove it and use this one instead.
Font Awesome offers similar advantages to Grunt Badass, when optimising icons:
But Font Awesome does have some drawbacks:
The one advantage Font Awesome has is that it supports IE6 & IE7, whereas Grunt Badass only supports IE8.
So, if you only have to support IE8 and up, plus anything above Android 2.3 (all other major browsers are supported), the advantages to Grunt Badass are as follows:
About inline SVGs and definitions Scroll down to 'Using "inline" SVG' - http://css-tricks.com/using-svg/
About inline SVGs with the tag http://css-tricks.com/svg-symbol-good-choice-icons/
SVGs vs Font Icons http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/
compressSprite, which uses Imagemin/PNGQuant lossy compression.
Task submitted by Jim Doyle