Skip to content

An add-on which generates sprite sheets for your EmberJs projects

Notifications You must be signed in to change notification settings


Repository files navigation


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.


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!


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 of public)
  • Add an array of sprite options for broccoli-sprite under sprite when instantiating EmberApp:

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 = new EmberApp({
  /* other options */
  sprite: [
      debug: true,
      src: [
      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: (process.env.NODE_ENV === 'production'),
    // optional: more sprite sheet configurations
    // , { ... }


From scratch

# New ember-cli application
ember new ember-sprite-demo
ember install ember-sprite

# download images for spriting
mkdir -p public/images/sprites
curl > public/images/sprites/emberjs.png
curl > public/images/sprites/iojs.png
curl > public/images/sprites/js.png

# add images to main template
echo '<div class="icon-emberjs"></div>' >> app/templates/application.hbs
echo '<div class="icon-iojs"></div>' >> app/templates/application.hbs
echo '<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/dummy
ember 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


Maintained by Brendan Graetz

Additional contributions from: