${data}
`\nconst mapTemplate = (type, template) => {\n const text = instrument(template, prefix, type === 'svg');\n const content = createFragment(text, type);\n // once instrumented and reproduced as fragment, it's crawled\n // to find out where each update is in the fragment tree\n const tw = createWalker(content);\n const nodes = [];\n const length = template.length - 1;\n let i = 0;\n // updates are searched via unique names, linearly increased across the tree\n // \n let search = `${prefix}${i}`;\n while (i < length) {\n const node = tw.nextNode();\n // if not all updates are bound but there's nothing else to crawl\n // it means that there is something wrong with the template.\n if (!node)\n throw `bad template: ${text}`;\n // if the current node is a comment, and it contains is\u00B5X\n // it means the update should take care of any content\n if (node.nodeType === 8) {\n // The only comments to be considered are those\n // which content is exactly the same as the searched one.\n if (node.data === search) {\n nodes.push({type: 'node', path: createPath(node)});\n search = `${prefix}${++i}`;\n }\n }\n else {\n // if the node is not a comment, loop through all its attributes\n // named is\u00B5X and relate attribute updates to this node and the\n // attribute name, retrieved through node.getAttribute(\"is\u00B5X\")\n // the is\u00B5X attribute will be removed as irrelevant for the layout\n // let svg = -1;\n while (node.hasAttribute(search)) {\n nodes.push({\n type: 'attr',\n path: createPath(node),\n name: node.getAttribute(search),\n //svg: svg < 0 ? (svg = ('ownerSVGElement' in node ? 1 : 0)) : svg\n });\n node.removeAttribute(search);\n search = `${prefix}${++i}`;\n }\n // if the node was a style, textarea, or others, check its content\n // and if it is then update tex-only this node\n if (\n textOnly.test(node.tagName) &&\n node.textContent.trim() === ``\n ){\n node.textContent = '';\n nodes.push({type: 'text', path: createPath(node)});\n search = `${prefix}${++i}`;\n }\n }\n }\n // once all nodes to update, or their attributes, are known, the content\n // will be cloned in the future to represent the template, and all updates\n // related to such content retrieved right away without needing to re-crawl\n // the exact same template, and its content, more than once.\n return {content, nodes};\n};\n\n// if a template is unknown, perform the previous mapping, otherwise grab\n// its details such as the fragment with all nodes, and updates info.\nconst mapUpdates = (type, template) => {\n const {content, nodes} = (\n cache.get(template) ||\n cache.set(template, mapTemplate(type, template))\n );\n // clone deeply the fragment\n const fragment = document.importNode(content, true);\n // and relate an update handler per each node that needs one\n const updates = nodes.map(handlers, fragment);\n // return the fragment and all updates to use within its nodes\n return {content: fragment, updates};\n};\n\n// as html and svg can be nested calls, but no parent node is known\n// until rendered somewhere, the unroll operation is needed to\n// discover what to do with each interpolation, which will result\n// into an update operation.\nexport const unroll = (info, {type, template, values}) => {\n const {length} = values;\n // interpolations can contain holes and arrays, so these need\n // to be recursively discovered\n unrollValues(info, values, length);\n let {entry} = info;\n // if the cache entry is either null or different from the template\n // and the type this unroll should resolve, create a new entry\n // assigning a new content fragment and the list of updates.\n if (!entry || (entry.template !== template || entry.type !== type))\n info.entry = (entry = createEntry(type, template));\n const {content, updates, wire} = entry;\n // even if the fragment and its nodes is not live yet,\n // it is already possible to update via interpolations values.\n for (let i = 0; i < length; i++)\n updates[i](values[i]);\n // if the entry was new, or representing a different template or type,\n // create a new persistent entity to use during diffing.\n // This is simply a DOM node, when the template has a single container,\n // as in ``, or a \"wire\" in `` and similar cases.\n return wire || (entry.wire = persistent(content));\n};\n\n// the stack retains, per each interpolation value, the cache\n// related to each interpolation value, or null, if the render\n// was conditional and the value is not special (Array or Hole)\nconst unrollValues = ({stack}, values, length) => {\n for (let i = 0; i < length; i++) {\n const hole = values[i];\n // each Hole gets unrolled and re-assigned as value\n // so that domdiff will deal with a node/wire, not with a hole\n if (hole instanceof Hole)\n values[i] = unroll(\n stack[i] || (stack[i] = createCache()),\n hole\n );\n // arrays are recursively resolved so that each entry will contain\n // also a DOM node or a wire, hence it can be diffed if/when needed\n else if (isArray(hole))\n unrollValues(\n stack[i] || (stack[i] = createCache()),\n hole,\n hole.length\n );\n // if the value is nothing special, the stack doesn't need to retain data\n // this is useful also to cleanup previously retained data, if the value\n // was a Hole, or an Array, but not anymore, i.e.:\n // const update = content => html`SVG Icons - Generated by IcoMoon
Notice: This demo (along with "symbol-defs.svg" and "svgxuse.js" files) should be hosted on a web server to work properly.
+SVG Icons - Generated by IcoMoon
+