broccoli-sass-image-compiler
MIT License
This is a broccoli library for processing image files and creating SASS variables with Data URIs in them.
NOTES:
- file names must make good SASS variable names. Names like "my awesome image.gif" will not work because of the spaces.
- file names don't need the $ prefix.
- file names should be unique regardless of folder depth. This script is "dumb" and just uses the file name.
- Do a little dance.
- Make a little love.
- Get down tonight.
Usage
In your Brocfile.js
:
var sassImageCompiler = require('broccoli-sass-image-compiler'); var imageTree = sassImageCompiler('/some_dir', { inputFiles: [ '**/*.png', // all png files 'someFile.svg' // specific svg file ], // specify the output file you want created outputFile: '/compiled-images.scss', // whether or not to output an icon class // defaults to true icon: true, // whether or not to output width and height variables, required for icon class. // defaults to true size: true, // name for parent class of icon class output (i.e "icon" in `.icon.image_name`) // defaults to "icon" iconClass: 'icon'});
Then in your SASS
@import 'path/to/compiled-images'; .custom-class { background-image: url($someFile); // derived from 'someFile.svg'} .other-class { background-image: url($icon_16x16); // if you had a file named "whatever/icon_16x16.png"}
Output from this tool includes:
$filename
: the data URI variable with the base64 encoded image in it.$filename_width
: the width of the image$filename_height
: the height of the image.icon.filename
: classes that, when applied can be used as an icon for the image file.<div class="icon filename"></div>