Add icon request caching

We now only create one request per icon.

packages/common/vpu-common-demo.js

@@ -95,7 +95,8 @@ class VpuCommonDemo extends VPULitElement {
                         <p style="font-size: 2em; color: orange">Foo <vpu-icon name="cloudnetwork"></vpu-icon> bar</p>
                         <span style="background-color: #000"><a href="#" style=" color: #fff">foobar</a></span>
                         <br>
-                        <vpu-icon style="color: green; height: 50px; border: #000 solid 1px"></vpu-icon>
+
+                        ${(new Array(50).fill(0)).map(i => html`<vpu-icon style="color: green; width: 50px; height: 50px; border: #000 solid 1px"name="coffee-cup"></vpu-icon>`)}
                     </div>
                 </div>
                 <div class="container">

packages/common/vpu-icon.js

@@ -41,6 +41,7 @@ export function getIconCSS(name) {
 
 async function getSVGTextElement(name) {
     const iconURL = getIconSVGURL(name);
+
     const response = await fetch(iconURL);
     if (!response.ok) {
         return unsafeHTML(errorIcon);
@@ -53,10 +54,28 @@ async function getSVGTextElement(name) {
     return unsafeHTML(text);
 }
 
+const iconCache =  {};
+
+/**
+ * Avoid lots of requests in case an icon is used multiple times on the same page.
+ *
+ * @param {string} name
+ */
+async function getSVGTextElementCached(name) {
+    if (iconCache[name] === undefined) {
+        let promise = getSVGTextElement(name);
+        iconCache[name] = promise;
+        return promise;
+    } else {
+        return iconCache[name];
+    }
+}
+
 /**
- * For icon names see https://materialdesignicons.com/
+ * For icon names see https://lineicons.com
  */
 class Icon extends LitElement {
+
     constructor() {
         super();
         this.name = "bolt";
@@ -88,7 +107,7 @@ class Icon extends LitElement {
     } 
 
     render() {
-        let svg = getSVGTextElement(this.name);
+        let svg = getSVGTextElementCached(this.name);
         return html`
             ${until(svg)}
         `;