Skip to content

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

Notifications You must be signed in to change notification settings

bguiz/ember-sprite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

6f419b4 · Nov 7, 2018

History

78 Commits
Sep 23, 2014
Sep 23, 2014
Nov 22, 2017
Nov 22, 2017
Sep 23, 2014
Nov 22, 2017
Sep 23, 2014
Nov 22, 2017
Nov 22, 2017
Nov 22, 2017
Nov 22, 2017
Jan 6, 2016
Nov 4, 2018
Nov 22, 2017
Nov 4, 2018
Nov 4, 2018
Nov 7, 2018
Nov 22, 2017

Repository files navigation

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