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
;;; <div> <SvgSprite spritesheet=spritesheet sprite="26" image="/spritesheet.png" width="120px" /> </div>;
Props
Object
spritesheet imported or loaded and parsed TexturePacker json Hash or spritesheet.thisotherthing.co spritesheet json (using either rects or polygons)
string
sprite the name of the sprite, as saved in the spritesheet
string
image url to the generated spritesheet image
string
default: "auto"
width css string for the width of the svg
string
default: "auto"
height 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