Skip to content
Sprite generator written for .NET Core
Branch: master
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.
.vscode
docs
src/Spritey
tests
.editorconfig
.gitignore
LICENSE
README.md
Spritey.ruleset
Spritey.sln
azure-pipelines.yml
stylecop.json

README.md

Spritey

GitHub license Twitter

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 Build Status codecov sonarcloud

Example:

Input

image1 image2 image3 image4 image5 image6 image7

Output

image1

.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
You can’t perform that action at this time.