iconize

iconize

Converts a bunch of SVG icons to CSS data URLs with PNG fallbacks. Inspired by grunticon, but simpler and not requiring grunt.

Usage

iconize(files, options, done)

Takes an array of file paths and an options object. Available options are:

• width: icon width (default: 32)

• height: icon height (default: 32)

• iconName: a function that takes a path to an svg file and returns an icon name suitable for inclusion in a filename and a CSS class name. Default: returns the basename of the file, without the extension, converted to lowercase and with all characters removed except letters, digits, hyphen and underscore.

• svgCssPath: path to generated CSS file, SVG version (default: svg-icons.css)

• pngCssPath: path to generated CSS file, PNG version (default: png-icons.css)

• pngDir: path to the directory where PNG files are placed; will be created if nonexistent (default: png)

• pngPrefix: path to PNG files used by CSS URLs (default: same as pngDir)

• cssPrefix: prefix for CSS classes (default: icon-)

• variants: a (possibly empty) array of objects with keys:

  • name: variant name to be appended to PNG file names
  • selector: CSS selector to be appended to CSS classes
  • transform: a function taking a string and returning another string.

Variants allow the creation of alternative versions of the icons by transforming the SVG (e.g., change the color on hover).