grunt-badass
Advanced tools
Use SVG elements on modern browsers with sprite fallback for IE8, just using CSS classes and some conditional JS polyfilling
Use SVG elements on modern browsers with sprite fallback for IE8, just using CSS classes and some conditional JS polyfilling.
This plugin requires Grunt ~0.4.5
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
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-badass');
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
.svgfiles
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 }
#BADA55 fluro green with for the fill colour.#BADA55 fluro green with for the stroke colour.0.1pt in 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
cssPrefix.
Local path to the folder that will contain any icons marked as 'stand alone' (in each icon config you can set this with
standAlone:true).
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
.cssor.scssfile that contains sprite data. If using compass sprites and scss, this should be a.scssfile andincludeCompassSpriteStyles: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: false,
pngQuantSettings: {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 anoscriptelement 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 short
,spriteUrl: "/absolute/url/to/sprite.png"
,spriteOutput: "local/path/to/sprite/file.png"
// if 'standAlone' is marked as true, files will get copied to this directory
,standAlonePngDir: "path/to/standalone/png/output/directory/"
// Default is compressSprite.keepUncompressed = false
,compressSprite: {
keepUncompressed: true
}
,stylesOutput: "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: true }
,{ filename: "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 output
,clearTmpDir: 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 short
,stylesOutput: "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 generation
,svgoPlugins: [
/**
* 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: false }
,{ convertStyleToAttrs: false }
,{ convertTransform: false }
,{ convertShapeToPath: false }
]
}
}
A modified version of the HTML5 Shiv - https://github.com/aFarkas/html5shiv - has been included, which adds <svg> and <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:
#BADA55.About inline SVGs and definitions Scroll down to 'Using "inline" SVG' - http://css-tricks.com/using-svg/
About loading SVGs with js http://www.pencilscoop.com/2014/04/injecting-svg-with-javascript/
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.svgFileExceptions, svgLoaderOutput and svgPrefix.Task submitted by Jim Doyle
FAQs
Use SVG elements on modern browsers with sprite fallback for IE8, just using CSS classes and some conditional JS polyfilling
The npm package grunt-badass receives a total of 0 weekly downloads. As such, grunt-badass popularity was classified as not popular.
We found that grunt-badass demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.