react-sprite/dist/index.js

React Component to Display SVG from Sprite with Polyfill for IE11.

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};

// index.tsx
import React, { useRef, useMemo, useEffect } from "react";
import request from "xhr";
var sprites = /* @__PURE__ */ new Map();
var requests = /* @__PURE__ */ new Map();
var createDocumentFromSprite = (body) => {
  const spriteDocument = document.implementation.createHTMLDocument("");
  spriteDocument.body.innerHTML = body;
  return spriteDocument;
};
var absoluteUrl = (url) => {
  const link = document.createElement("a");
  link.href = url;
  return link.href;
};
var insertSymbolFromSprite = (sprite, node, id) => {
  const spriteSymbol = sprite.getElementById(id);
  const symbolChildren = spriteSymbol.childNodes;
  const childrenCount = symbolChildren.length;
  if (spriteSymbol.hasAttribute("viewBox")) {
    node.setAttribute("viewBox", spriteSymbol.getAttribute("viewBox"));
  }
  while (node.firstChild) {
    node.removeChild(node.firstChild);
  }
  for (let i = 0; i < childrenCount; i += 1) {
    const currentNode = symbolChildren[i];
    if (currentNode && !(currentNode instanceof Text)) {
      node.appendChild(currentNode.cloneNode(true));
    }
  }
};
var requestSprite = (link, node) => __async(void 0, null, function* () {
  const [url, id] = link.split("#");
  if (sprites.has(url)) {
    insertSymbolFromSprite(sprites.get(url), node, id);
    return;
  }
  if (requests.has(url)) {
    requests.get(url).push((sprite) => insertSymbolFromSprite(sprite, node, id));
    return;
  }
  requests.set(url, []);
  request(
    {
      uri: absoluteUrl(url)
    },
    (error, _, sprite) => {
      if (error && process.env.NODE_ENV !== "production") {
        console.warn(`ReactSprite: unable to load sprite from ${url}.`);
        requests.delete(url);
        return;
      }
      const spriteDocument = createDocumentFromSprite(sprite);
      if (!sprites.has(url)) {
        sprites.set(url, spriteDocument);
      }
      const pending = requests.get(url);
      pending.forEach((done) => done(spriteDocument));
      insertSymbolFromSprite(spriteDocument, node, id);
      requests.delete(url);
    }
  );
});
var shouldPolyfill = () => {
  const newerIEUA = /\bTrident\/[567]\b|\bMSIE (?:9|10)\.0\b/;
  const webkitUA = /\bAppleWebKit\/(\d+)\b/;
  const olderEdgeUA = /\bEdge\/12\.(\d+)\b/;
  const edgeUA = /\bEdge\/.(\d+)\b/;
  const inIframe = window.top !== window.self;
  return newerIEUA.test(navigator.userAgent) || Number((navigator.userAgent.match(olderEdgeUA) || [])[1]) < 10547 || Number((navigator.userAgent.match(webkitUA) || [])[1]) < 537 || edgeUA.test(navigator.userAgent) && inIframe;
};
var validateProps = ({ href, xlinkHref }) => {
  const link = href != null ? href : xlinkHref;
  if (process.env.NODE_ENV !== "production") {
    if (typeof link !== "string" || link.length < 1) {
      console.warn(`ReactSprite: invalid href provided (${link}).`);
    }
  }
  return {
    link
  };
};
var react_sprite_default = (_a) => {
  var _b = _a, {
    href,
    xlinkHref,
    force
  } = _b, props = __objRest(_b, [
    "href",
    "xlinkHref",
    "force"
  ]);
  const ref = useRef(null);
  const polyfill = useMemo(() => force || shouldPolyfill(), [force]);
  const { link } = validateProps({ href, xlinkHref });
  if (polyfill) {
    useEffect(() => {
      if (ref.current) {
        requestSprite(link, ref.current);
      }
    });
  }
  if (polyfill) {
    return /* @__PURE__ */ React.createElement("svg", __spreadProps(__spreadValues({}, props), { ref }));
  }
  return /* @__PURE__ */ React.createElement("svg", __spreadValues({}, props), /* @__PURE__ */ React.createElement("use", { xlinkHref: link }));
};
export {
  react_sprite_default as default
};
//# sourceMappingURL=index.js.map