sprity-js
A JS style processor for sprity
Advantages over traditional css class based sprites
Check out React: css in js for a good talk on the basic advantages.
Here's a couple advantages. You'll see the details in the code examples below.
- Programmatic checking
- Overwriting styles and images without worrying about specificity or order
- Easy Linting
Requirements
- sprity version >= 1.0
Install
npm install sprity sprity-js --save-dev
Usage
Here's a example using gulp, but see sprity for full documentation.
var gulp = requirevar sprity = require;var sprityJS = require; gulp.task
Output
Here's an example of what the output might look like. This example assumes you're using split: true
in your sprity config.
images|- testFolder1 |- test1.png
module.exports =
How to use it in your code
Imagine we had two images in our app
folder. rocketship.png
and rocketship_hover.png
. In our js these would be represented by Sprites.App.Rocketship
and Sprites.App.RocketshipHover
. Here's an example using React and Radium of what it might look like.
var Radium = require;var React = require; @Radiumclass Icon extends React.Component // Where we want to use the componentvar Sprites = require; // Wherever you put your sprity output. <Icon sprite={Sprites.App.Rocketship} hoverSprite={Sprites.App.RocketshipHover} />
Overwriting styles
One of the issues I ran into using sprity with css outputs was with not being able to control the order of the output. This became an annoyance with try to overwriting styles. With javascript that issue is gone completely. In this example the :hover
state will always take precedence over the styles of base sprite.
style={[ this.props.sprite, {':hover': this.props.hoverSprite}]}
Programmatic checking
We could also easily write a component that automatically renders the hover state if one exists. Something like this would work great.
var Radium = require;var React = require;var Sprites = require; // Wherever you put your sprity output. @Radiumclass Icon extends React.Component // Where we want to use the component <Icon sprite="Rocketship" />
Easy Linting
Now that all our sprite are in a js file its easy to itterator over them and lint them. Check out this gist for making sure hover and active images have the same dimensions as their root image