While sprites may not be in vogue anymore and font svg based icon libraries are all the rage, css based sprites still have their place (i think), so why not implement yet another sprite generator in .NET Core.

Spritey is a sprite generator. It takes a directory of images and converts them to an optimally packed rectangle, outputting a css embedded or referenced gif or png as well as the accompanying css stylesheet.

While the generated gif is substantially smaller than the png, it suffers from quality degradation, especially if the source images vary in style (colors / complexity). The output should always be checked for quality.

Goal

The end goal of this project is to produce both a .NET Core NuGet library for consuming apps, as well as a .NET Core Global Tool for CLI sprite generation.

Build Status

	Build Status	Code Coverage	Quality
Windows & Linux

Example:

Input

Output

.img-sprite{background: transparent url(sprite.png);}
i.img-sprite{display:inline-block;}
.img-sprite.img-icons8-padlock-100{height:100px;width:100px;background-position: -0px -0px;}
.img-sprite.img-icons8-lion-statue-48{height:48px;width:48px;background-position: -0px -100px;}
.img-sprite.img-icons8-news-48{height:48px;width:48px;background-position: -48px -100px;}
.img-sprite.img-icons8-public-transportation-48{height:48px;width:48px;background-position: -0px -148px;}
.img-sprite.img-icons8-roundabout-48{height:48px;width:48px;background-position: -48px -148px;}
.img-sprite.img-icons8-workstation-40{height:40px;width:40px;background-position: -0px -196px;}
.img-sprite.img-icons8-public-30{height:30px;width:30px;background-position: -40px -196px;}

API

Option 1

• generate css with gif or png that is embedded or referenced

using Spritey;

string directoryOfImages = ""; // path to your images
string outputDirectory = ""; // path to output files

using (Sprite sprite = new Sprite(directoryOfImages))
{
    // css with referenced gif
    sprite.Save("spriteName", outputDirectory, false, SpriteFormat.Gif);
}

Option 2

• generate css with embedded or referenced gif
• and generate css with embedded or referenced png

using Spritey;

string directoryOfImages = ""; // path to your images
string outputDirectory = ""; // path to output files

using (Sprite sprite = new Sprite(directoryOfImages))
{
    // css with embedded gif and css with embedded png
    sprite.Save("spriteName", outputDirectory, true);
}

Option 3

• generate css with embedded gif
• and generate css with embedded png
• and generate css and referenced gif
• and generate css and referenced png

using Spritey;

string directoryOfImages = ""; // path to your images
string outputDirectory = ""; // path to output files

using (Sprite sprite = new Sprite(directoryOfImages))
{
    // output all variations
    sprite.Save("spriteName", outputDirectory);
}

Getting started

Building in VSCode

• Build: ctrl + p => task build
• Test: ctrl + p => task test