README

Is a simple image to sprite compiler tool for web development.

Features

Supports png, gif, jpg, bmp and webp icons.
Automatically generate css class for each icon.
Easy integration with any web projects.

Installation

You can install via composer.

composer require jameslevi/sprite --dev

Copy the atmos file from vendor/jameslevi/atmos folder to your root directory.
Create a new folder in your root directory named commands.

Getting Started

Create a new atmos command file named "sprite".

php atmos --make sprite

Open the Sprite.php file from commands folder and add a new protected method named "generate".

/**
 * Method to generate sprite image and stylesheet.
 *
 * @param  array $arguments
 * @return void
 */

protected function generate(array $arguments)
{
     
}

Try the following code inside the generate method.

// Create new instance by setting sprite name and asset location.
$sprite = new Sprite("test", __DIR__ . "/../resources/icons");

// Set where to save the generated sprite image.
$sprite->setGeneratedImagePath(__DIR__ . "/../public/img");
$sprite->setImageBaseURL("/../img");

// Set where to save the generated css file.
$sprite->setGeneratedCSSPath(__DIR__ . "/../public/css");

$sprite->generate();

Run the following command in your terminal to generate sprite.

php atmos sprite:generate

Add the generated css file in the head section of your project.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/sprite-test.css">
</head> 
<body>
  
</body>
</html>

You can access each icon using css classes in this pattern sprite-{sprite name}-{icon name}.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/sprite-test.css">
</head> 
<body>
 
    <div class="sprite-test sprite-test-icon1"></div>
    <div class="sprite-test sprite-test-icon2"></div>
    <div class="sprite-test sprite-test-icon3"></div>
 
</body>
</html>

If there is a need to add new icons into your icon set, just run the generate command and it will generate new sprite image and stylesheet again.

Best Practices

In each sprite set, always make sure all icons are of the same type and dimensions.
Do not add spaces in naming icons, instead use hypen to separate words.
Do not place your assets folder in public directory.

Contribution

For bug reports and suggestions, you can email James Levi Crisostomo via nerdlabenterprise@gmail.com.

License

This package is an open-sourced software licensed under MIT License.

jameslevi / sprite

Maintainers

Details