WIP: dynamically add references to scenario svg

src/import_external_resources.js

@@ -1,15 +1,18 @@
 import mapsheets from './assets/images/mapsheets.svg';
-import counters from './assets/images/counters.svg';
 
-const files = {
-  'mapsheets.svg': mapsheets,
-  'counters.svg': counters
-}
+const doc = new DOMParser().parseFromString(mapsheets, 'image/svg+xml');
+const refs = [];
 
-document.querySelectorAll('use[data-href*=".svg"').forEach(el => {
-  const [filename] = el.dataset.href.match(/.+\.svg/g)
-    , href = el.dataset.href.replace(filename, files[filename].split('/').pop())
-    ;
-
-  el.setAttributeNS(null, 'href', href);
+document.querySelectorAll('use[href*=".svg"').forEach(el => {
+  const fragId = el.getAttributeNS(null, 'href').split('.svg').pop();
+  const frag = doc.querySelector(fragId);
+  frag.querySelectorAll('use').forEach(el => refs.push(el.getAttributeNS(null, 'href')));
+  if (el.style.transform) frag.style.transform = el.style.transform;
+  el.replaceWith(frag);
 });
+
+const refsQuery = [...new Set([...refs])].join(', ');
+const refNodes = doc.querySelectorAll(refsQuery);
+const defs = document.querySelector('defs');
+
+refNodes.forEach(n => defs.appendChild(n));