Encode a directory of images to CSS
npm install directory-encoder
Encode a directory of PNG or SVG images to CSS
npm install directory-encoder``javascript`
var DirectoryEncoder = require('directory-encoder');
var de = new DirectoryEncoder( source, destinationCSSFile, {
pngfolder: pngfolder, //in case you need to link out for PNGs, like when the datauri is way too long
customselectors: { "foo": [".bar", ".baz"]},
prefix: ".icon-", // used to prefix the name of the file for the CSS classname, .icon- is the default
templatePrepend: "/ start of icon-list /", // this string is prepended to the destinationCSSFile, defaults to ""
handlebarsCallback: function(hbs) { / configure handlebars, with custom helpers for example / }, // callback to configure handlebars
template: template.hbs, //template in handlebars, FANCY!
templateAppend: "/ end of icon-list /", // this string is appended to the destinationCSSFile, defaults to ""
noencodepng: false // turn this to true if you want no datauris for pngs, just links out to png files
});
de.encode(); // "Guitar solo -- File outputted"
Takes three arguments, source directory for encoding/an array of files
you'd like to encode, destination css
file for when it writes, and an options hash that includes a spot for
customselectors, a hbs template in case you want to get nuts with your
css, where the pngs are located if you want to link out to them (or you
don't have a choice because the data uri is bigger than 32k), and a
switch to turn off datauris for pngs.
All the magic happens here.
var de = new DirectoryEncoder( source, destinationCSSFile, {
pngfolder: pngfolder, //in case you need to link out for PNGs, like when the datauri is way too long
customselectors: { "foo": [".bar", ".baz"]},
template: template.hbs, //template in handlebars, FANCY!
noencodepng: false // turn this to true if you want no datauris for pngs, just links out to png files
});
de.encode(); // "Guitar solo -- File outputted"
* 0.7.0 Add templateAppend and templatePrepend options
* 0.6.0 Fix encoding brackets and ability to take an array
* 0.5.0 PNGpath
* 0.4.0 Width/Height from template
* 0.3.0 Adding custom selectors that allow for wildcards
* 0.2.0 Adding switchable icon name prefixes
* 0.1.0 Woo