An application and library that transforms image files to data URIs and embeds them into a single CSS file.
pronunciation: imax
An application and library that transforms image files to data URIs (rfc2397) and embeds them into a single CSS file as background images.
Let's say you have a web-based frontend which embeds a lot of images (e.g. icons). This referencing produces HTTP requests for every single image. What if you would like to minimize it to just one request? That is something
imacsscan do for you.
Okay, enough words. Let's dive straight into a transformation example. If we assume that you have two SVGs, like
github.svgand
quitter.svg,
imacsswill generate this CSS code for you.
.imacss.imacss-github { background:url(data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhEBg...); }.imacss.imacss-quitter { background:url(data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhADA...); }
You can refer to this images by using the respective CSS classes:
...
imacsscomes with a command-line interface which pipes the output to stdout by default (yeah, plain old text streams FTW!).
Install with npm globally.
npm install -g imacss
Embed all SVGs in a particular directory and all its subdirectories (will pipe the output to stdout).
$ imacss "~/projects/webapp/images/**/*.svg"
Embed all SVGs in a particular directory and transfer them to a CSS file which will be saved in the CWD.
$ imacss "~/projects/webapp/images/*.svg" > images.svg.css
Embed all SVGs and PNGs in a particular directory and transfer them to a CSS file which will be saved in the CWD.
$ imacss "~/projects/webapp/images/*.{svg,png}" > images.css
If you don't like the
imacssselector namespace you are able to modify it as well.
$ imacss "~/projects/webapp/images/*.{svg,png}" foobar > images.css
will produce this selector structure in the CSS file:
.foobar.foobar-github {...}
Important: Please note that
imacssdoes not embed
image/svg+xmlas
base64strings. Instead it will use the raw
utf-8representation.
If you would like to use the
imacssfunctionality within your application, there is an API for that.
Install with npm
npm install --save imacss
Transforms the image files from the specified glob and returns a stream with the CSS selectors that can be piped to somewhere else.
Arguments
glob
String || Vinyl file object
The path to the images which should be transformed. You can use any glob pattern you want or you're also able pass single Vinyl file objects.
namespace(optional; default=imacss)
String || Function
A string containing the css class namespace prefix, or a function to generate the entire CSS ruleset.
The CSS selector namespace.
var imacss = require('imacss');imacss .transform('/path/to/your/images/*.png') .on('error', function onError (err) { console.error('Transforming images failed: ' + err); }) .pipe(process.stdout);
var imacss = require('imacss');function generateCss(image) { return '.image-' + image.slug + ' { ' + 'background-image:' + 'url('' + image.datauri + ''); }'; }
imacss .transform('/path/to/your/images/*.png', generateCss) .on('error', function (err) { console.error('Transforming images failed: ' + err); }) .pipe(process.stdout);
Copyright 2014 - 2015, André König ([email protected])