UNPKG

react-svg-spritesheet

Version:

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

38 lines (37 loc) 2.42 kB
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); var react_1 = __importDefault(require("react")); var GetRectSprite = function (spritesheet, spriteName, spritesheetUrl, width, height) { // const spriteData = spritesheet.frames["4_square_6x6"]; if (width === void 0) { width = "auto"; } if (height === void 0) { height = "auto"; } if (spritesheet.frames === undefined) { return react_1.default.createElement("span", null, "spritesheet has no frames"); } if (spritesheet.frames[spriteName] === undefined) { return react_1.default.createElement("span", null, "sprite ", spriteName, " not found"); } var spriteData = spritesheet.frames[spriteName]; var spriteWidth = spritesheet.meta.size.w / spriteData.sourceSize.w; var spriteHeight = spritesheet.meta.size.h / spriteData.sourceSize.h; var spriteX = -(spriteData.frame.x / spritesheet.meta.size.w) * spriteWidth; var spriteY = -(spriteData.frame.y / spritesheet.meta.size.h) * spriteHeight; var rectX = spriteData.spriteSourceSize.x / spriteData.sourceSize.w; var rectY = spriteData.spriteSourceSize.y / spriteData.sourceSize.h; var clipRectWidth = spriteData.frame.w / spriteData.sourceSize.w; var clipRectHeight = spriteData.frame.h / spriteData.sourceSize.h; var cleanedSpriteName = spriteName; var clipPathId = cleanedSpriteName + "-clip"; return (react_1.default.createElement("svg", { width: spriteData.sourceSize.w + "px", height: spriteData.sourceSize.h + "px", style: { width: width, height: height, margin: 0, padding: 0 } }, react_1.default.createElement("defs", null, react_1.default.createElement("clipPath", { id: clipPathId, preserveAspectRatio: "none" }, react_1.default.createElement("rect", { x: rectX * 100 + "%", y: rectY * 100 + "%", width: clipRectWidth * 100 + "%", height: clipRectHeight * 100 + "%" }))), react_1.default.createElement("image", { href: spritesheetUrl, preserveAspectRatio: "none", x: (spriteX + rectX) * 100 + "%", y: (spriteY + rectY) * 100 + "%", width: spriteWidth * 100 + "%", height: spriteHeight * 100 + "%", clipPath: "url(#" + clipPathId + ")" }))); }; exports.default = GetRectSprite;