Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Sprite generator written for .NET Core

Topics

Resources

License

Releases

No releases published

Packages

No packages published