An add-on which generates sprite sheets for your EmberJs projects
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
tests
vendor
.editorconfig
.ember-cli
.eslintrc.js
.gitignore
.npmignore
.travis.yml
.watchmanconfig
README.md
ember-cli-build.js
index.js
package-lock.json
package.json
testem.js

README.md

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 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: [
        '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: (process.env.NODE_ENV === 'production'),
    }
    // optional: more sprite sheet configurations
    // , { ... }
  ]
});

Examples

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 https://upload.wikimedia.org/wikipedia/en/6/69/Ember.js_Logo_and_Mascot.png > public/images/sprites/emberjs.png
curl https://iojs.org/images/1.0.0.png > public/images/sprites/iojs.png
curl 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.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

Contributors

Maintained by Brendan Graetz

Additional contributions from:

Licence

GPLv3