fix: only use IE11 compatible APIs

Author: Kalle Ott

package.json

@@ -1,5 +1,6 @@
 {
   "name": "react-lazy-svg",
+  "version": "1.1.1",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/kaoDev/react-lazy-svg"
@@ -9,7 +10,6 @@
     "url": "https://github.com/kaoDev/"
   },
   "description": "react-lazy-svg is a simple way to use SVGs with the performance benefits of a sprite-sheet and svg css styling possibilities. Without bloating the bundle. It automatically creates a sprite-sheet for all used SVGs on the client but also provides a function to create a server side rendered sprite-sheet for icons used in the first paint.",
-  "version": "1.1.0",
   "main": "dist/index.js",
   "module": "dist/react-lazy-svg.esm.js",
   "typings": "dist/index.d.ts",
@@ -50,7 +50,8 @@
     "react-dom": "^16.13.1",
     "tsdx": "^0.13.2",
     "tslib": "^2.0.0",
-    "typescript": "^3.9.5"
+    "typescript": "^3.9.5",
+    "w3c-xmlserializer": "^2.0.0"
   },
   "dependencies": {}
 }

src/index.tsx

@@ -251,12 +251,16 @@ export const initOnClient = (
 ) => {
   knownIcons.clear();
   const spriteSheet = document.getElementById(spriteSheetId);
-
   if (spriteSheet) {
-    const sprites = spriteSheet.querySelectorAll('symbol');
+    const serializer = new XMLSerializer();
+    const sprites = Array.from(spriteSheet.querySelectorAll('symbol'));
+
+    for (const node of sprites) {
+      const innerHTML = Array.prototype.map
+        .call(node.childNodes, (child) => serializer.serializeToString(child))
+        .join('');
 
-    sprites.forEach((node) => {
-      const { id, attributes: rawAttributes, innerHTML } = node;
+      const { id, attributes: rawAttributes } = node;
       const attributes = mapNodeAttributes(rawAttributes);
       const iconData = {
         id,
@@ -266,6 +270,6 @@ export const initOnClient = (
       addIcon(iconData);
 
       knownIcons.set(id, new Promise((resolve) => resolve(iconData)));
-    });
+    }
   }
 };

test/index.test.tsx

@@ -59,6 +59,12 @@ test('should fill the cache when an icon is rendered', async () => {
 });
 
 test('client should be able to initiate the cache from a rendered dom', async () => {
+  const serialize = require('w3c-xmlserializer');
+
+  window.XMLSerializer = class XMLSerializer {
+    serializeToString = serialize;
+  };
+
   const cache: IconsCache = new Map();
   document.body.innerHTML = `<svg id="__SVG_SPRITE_SHEET__" style="display:none">
       <symbol
@@ -80,6 +86,6 @@ test('client should be able to initiate the cache from a rendered dom', async ()
   expect(iconData?.attributes.width).toBe(undefined);
   expect(iconData?.attributes.viewBox).toBe('0 0 24 24');
   expect(iconData?.svgString.__html).toBe(
-    '<path d="M0 0h24v24H0z" fill="none"></path>',
+    '<path xmlns="http://www.w3.org/2000/svg" d="M0 0h24v24H0z" fill="none"/>',
   );
 });

yarn.lock

@@ -5967,6 +5967,13 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^0.1.2"
 
+w3c-xmlserializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz#3e7104a05b75146cc60f564380b7f683acf1020a"
+  integrity sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==
+  dependencies:
+    xml-name-validator "^3.0.0"
+
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"