ember-sprite
This is an ember addon, that generates a sprite sheet from a folder of images. A sprite sheet consists of a single CSS file and a single image file.
It uses broccoli-sprite to do so, and you can read more details there.
This module's purpose is to allow you to use broccoli-sprite within an ember-cli application.
Usage
As with any other ember addon, you simply need to run the install command:
ember install ember-sprite
If you are still using Ember CLI < v1.0
,
please upgrade to the latest version.
Check this package's version of ember-cli
under devDependencies
for the best compatibility.
That is all!
Configuration
All the configuration options are pretty much the same as those in
broccoli-sprite.
There is an extra option removeSrcFiles
which tells addon to remove
source images after the sprite is finished.
The only thing that you need to do in addition is:
- Put your images in the
public
folder (or a subfolder ofpublic
) - Add an array of sprite options for
broccoli-sprite
undersprite
when instantiatingEmberApp
:
For example, if the images you would like to be sprited are in public/images/sprites
,
you can configure your app, in ember-cli-build.js
, like so:
var app = /* other options */ sprite: debug: true src: 'images/sprites/**/*.png' removeSrcFiles: true spritePath: 'assets/sprites.png' stylesheetPath: 'assets/sprites.css' stylesheet: 'css' stylesheetOptions: prefix: 'icon-' spritePath: '/assets/sprites.png' pixelRatio: 2 layoutOptions: padding: 2 optiping: processenvNODE_ENV === 'production' // optional: more sprite sheet configurations // , { ... } ;
Examples
From scratch
# New ember-cli application ember new ember-sprite-demoember install ember-sprite # download images for spriting mkdir -p public/images/spritescurl https://upload.wikimedia.org/wikipedia/en/6/69/Ember.js_Logo_and_Mascot.png > public/images/sprites/emberjs.pngcurl https://iojs.org/images/1.0.0.png > public/images/sprites/iojs.pngcurl https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png > public/images/sprites/js.png # add images to main template echo '<div class="icon-emberjs"></div>' >> app/templates/application.hbsecho '<div class="icon-iojs"></div>' >> app/templates/application.hbsecho '<div class="icon-js"></div>' >> app/templates/application.hbs # modify `EmberApp` to add the sprite configuration shown above $EDITOR ember-cli-build.js # run the application ember server$BROWSER http://localhost:4200# check that sprited images appear
From bundled demo page
Alternatively, you can clone this repository and run ember server
to see a
sample application that generates both retina and non-retina sprites.
cd tests/dummyember server
Road map
- Remove need to link additional stylesheet from
index.html
- by concatenating the sprite sheet's CSS with the main app's CSS
- Rerun upon file changes which trigger livereload
Contributors
Maintained by Brendan Graetz
Additional contributions from:
Licence
GPLv3