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 as JSON (Hash) or spritesheet.thisotherthing.co with format hash

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

Usage

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 json Hash or 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