sprite-brunch-localvox

Language agnostic sprite generator for brunch, customized for app.localvox

Usage no npm install needed!

<script type="module">
  import spriteBrunchLocalvox from 'https://cdn.skypack.dev/sprite-brunch-localvox';
</script>

README

sprite-brunch

Sprite Generator for brunch. It uses Spritesmith and json2css to generate sprites and language agnostic styles

Installation

To generate the sprites Cairo Spritesmith needs node-canvas or gm. Check out the Spritesmith website for details

Config

sprites:
    path: 'app/assets/images/sprites' # Path to your sprites folder
    destCSS: 'sass/_sprites.sass' # Destination sass/less/stylus files
    cssFormat: 'sass' # less, sass, scss, stylus
    algorithm: 'top-down' # algorithm: top-down, left-right, diagonal (\ format), alt-diagonal
    engine: 'canvas' # canvas, gm
    imgOpts:
        format: 'auto' # auto, jpg, png (If auto is used and there is png and jpg in a folder the sprite will be jpg)
        quality: 90 # Quality of the output image

Usage

It expects the following folder structure and uses the folder name as first value and the filename as the second

app/assets/images/sprites/icons
    icona.png
    iconb.png
app/assets/images/sprites/backgrounds

SASS Example

#test
    +sprite($icons, $icona)

Add "sprite-brunch": "0.0.2" to package.json of your brunch app.

Pick a plugin version that corresponds to your minor (y) brunch version.

If you want to use git version of plugin, add "sprite-brunch": "git+ssh://git@github.com:mllrsohn/sprite-brunch.git".