react-svg-spritesheet/README.md

use trimmed or polygon packed sprites without webGL/canvas 2d in the dom

# react-svg-spriteheet

use trimmed or polygon packed sprites without webGL/canvas 2d in the dom

## Motivation
Spritesheets are great for saving resources, but the usual css/dom implementations don't allow for nicer saving measures like white space trimming (without affecting sizing/positioning) or polygon packing, and sizing images independently of the sprites resolution also isn't easy

Using svgs with clip-paths meakes this possible, without having to use webGL or canvas 2D

## Installing

```
npm i react-svg-spriteheet
```

## Spritesheet

create your spritesheet with [TexturePacker](https://www.codeandweb.com/texturepacker) as `JSON (Hash)` or [spritesheet.thisotherthing.co](https://spritesheet.thisotherthing.co/) with format `hash`

it should be set to either trimmed rects or polygons and without rotation

## Usage

```javascript
import React from "react";
import SvgSprite from "react-svg-spriteheet";
import spritesheet from "../public/spritesheet.json";

export default () => (
  <div>
    <SvgSprite spritesheet={spritesheet} sprite="26" image="/spritesheet.png" width="120px" />
  </div>
);
```

### Props

#### spritesheet `Object`
imported or loaded and parsed [TexturePacker](https://www.codeandweb.com/texturepacker) json Hash or [spritesheet.thisotherthing.co](https://spritesheet.thisotherthing.co/) spritesheet json (using either rects or polygons)
  
#### sprite `string`
the name of the sprite, as saved in the spritesheet

#### image `string`
url to the generated spritesheet image

#### width `string` `default: "auto"`
css string for the width of the svg

#### height `string` `default: "auto"`
css string for the height of the svg


## Development
run `npm run dev`, this should start the server at `localhost:3000` and have nice auto reloading with react/next.js