images-to-variables

A simple utility for generating Sass/Less variables for images.

Installation

Install from NPM:

npm install images-to-variables

Using from Node

To generate encoded image values from Node, call the create function. A promise is returned and an array containing the encoded variables is passed to handlers:

var imagesToVariables = require('images-to-variables');

imagesToVariables.create( '*.png' ).then( function( variables ) {
	console.log( variables[0].name );
	console.log( variables[0].length );
	console.log( variables[0].value );
} );

A Note About Encoding: currently, the .png contents are base-64 encoded so it can be safely included. For .svg, the contents are simply escaped as per RFC 2397.

Options

Output File

Specify the dest option to write the variables directly to a file :

imagesToVariables.create( '*.png', { dest: variables.less } );

Prefix Variables

Specify the prefix option to prefix the generated variables:

imagesToVariables.create( '*.png', { prefix: 'vui-' } );

Sass

Specify the scssFormatter if you want scss variables:

imagesToVariables.create(
	'*.png', {
		formatter: imagesToVariables.scssFormatter
	}
);

Less

The default variable format is Less, however you can explicitly specify the lessFormatter if desired:

imagesToVariables.create(
	'*.png', {
		formatter: imagesToVariables.lessFormatter
	}
);

Compression

By default, images are minified using imagemin before encoding the variables. This can optionally be disabled by providing the optimize option:

imagesToVariables.create( '*.png', { optimize: false } );

Using from CLI

Creating variables from the CLI is a piece of cake. For example, the following commands will generate Less and Scss files containing variables formatted for Less or Scss respectively. A variable is generated for each file represented by the *.png pattern, and the variables will be prefixed with vui-.

imgtoless -p vui- -o variables.less *.png

imgtoscss -p vui- -o variables.scss *.png

Note: Currently, the images must be uniquely named. The module currently does not handle duplicate file names spread across directories, but this could be added.

Versioning and Releasing

This repo is configured to use semantic-release. Commits prefixed with fix: and feat: will trigger patch and minor releases when merged to main.

To learn how to create major releases and release from maintenance branches, refer to the semantic-release GitHub Action documentation.