Port vpu-icon to line icons

also provies a function for css content icons (a bit hacky as it uses masks)

packages/common/package.json

@@ -32,7 +32,6 @@
     "@sentry/browser": "^5.6.3",
     "bulma": "^0.7.5",
     "i18next": "^17.0.11",
-    "lit-element": "^2.2.1",
-    "material-design-icons-svg": "^3.0.0"
+    "lit-element": "^2.2.1"
   }
 }

packages/common/rollup.config.js

@@ -45,7 +45,7 @@ export default {
         copy({
             targets: [
                 {src: 'assets/index.html', dest: 'dist'},
-                {src: 'node_modules/material-design-icons-svg/paths/*.json', dest: 'dist/local/' + pkg.name + '/icons'},
+                {src: 'assets/icons/*.svg', dest: 'dist/local/' + pkg.name + '/icons'},
             ],
         }),
         (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false

packages/common/vpu-common-demo.js

 import {i18n} from './i18n.js';
-import {css, html} from 'lit-element';
+import {css, html, unsafeCSS} from 'lit-element';
 import * as commonUtils from './utils.js';
 import './vpu-mini-spinner.js';
 import './vpu-spinner.js';
-import './vpu-icon.js';
+import {getIconCSS} from './vpu-icon.js';
 import './vpu-button.js';
 import VPULitElement from './vpu-lit-element.js';
 import bulmaCSSPath from "bulma/css/bulma.min.css";
@@ -35,6 +35,10 @@ class VpuCommonDemo extends VPULitElement {
         return css`
             h1.title {margin-bottom: 1em;}
             div.container {margin-bottom: 1.5em;}
+
+            a:after {
+                ${ unsafeCSS(getIconCSS('bolt')) };
+            }
         `;
     }
 
@@ -80,11 +84,12 @@ class VpuCommonDemo extends VPULitElement {
                 <div class="container">
                     <label class="label">Icons</label>
                     <div class="control">
-                        <vpu-icon name="access-point-network-off"></vpu-icon>
-                        <vpu-icon style="color: green"></vpu-icon>
-                        <vpu-icon style="color: red"></vpu-icon>
-                        <vpu-icon style="color: blue"></vpu-icon>
-                        <vpu-icon style="color: orange" name="menu-down"></vpu-icon>
+                        <p style="text-decoration: underline">Foo <vpu-icon name="cloudnetwork"></vpu-icon> bar</p>
+                        <p style="font-size: 2em;">Foo <vpu-icon name="cloudnetwork"></vpu-icon> bar</p>
+                        <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>
                     </div>
                 </div>
                 <div class="container">

packages/common/vpu-icon.js

 import {html, LitElement, css} from 'lit-element';
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import {until} from 'lit-html/directives/until.js';
 import * as commonUtils from './utils.js';
 
+// Use in case the icon fails to load
+const errorIcon = `
+<svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<g>
+	<path d="M38.2,98.7c-1.1,0-2.2-0.6-2.8-1.6c-0.5-0.8-0.6-1.8-0.3-2.6l8.9-37.8H24.5c-1.2,0-2.2-0.6-2.8-1.5c-0.6-1-0.7-2.2-0.1-3.2
+		l0.2-0.3L54.9,3.1c0.9-1.6,2.3-1.8,2.8-1.8c1.1,0,2.2,0.6,2.8,1.6c0.5,0.8,0.6,1.7,0.3,2.6l-6.9,30.4L75.6,36
+		c1.1,0,2.2,0.6,2.8,1.5c0.6,1,0.7,2.2,0.1,3.2l-0.2,0.3L40.8,97.4l-0.2,0.2C40.3,97.9,39.5,98.7,38.2,98.7z M28.6,51.2h18.1
+		c1.8,0,3.2,1.5,3.2,3.4v0.3l-6.8,29l28.2-42.4l-20.3-0.1c-1.8,0-3.2-1.5-3.2-3.4v-0.3l5-21.9L28.6,51.2z M75.5,41.5
+		C75.5,41.5,75.5,41.5,75.5,41.5L75.5,41.5z M51.1,35.9L51.1,35.9C51.2,35.9,51.1,35.9,51.1,35.9z"/>
+</g>
+</svg>
+`;
+
+function getIconSVGURL(name) {
+    return commonUtils.getAssetURL('local/vpu-common/icons/' + encodeURI(name) + '.svg');
+}
+
+export function getIconCSS(name) {
+    const iconURL = getIconSVGURL(name);
+    return `
+        background-color: currentColor;
+        mask-image: url(${ iconURL });
+        -webkit-mask-image: url(${ iconURL });
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        mask-position: center center;
+        font-size: 1.1em;
+        content: "X";
+    `;
+}
+
+async function getSVGTextElement(name) {
+    const iconURL = getIconSVGURL(name);
+    const response = await fetch(iconURL);
+    if (!response.ok) {
+        return unsafeHTML(errorIcon);
+    }
+    let text = await response.text();
+    if (text.indexOf('<svg') !== -1)
+        text = text.slice(text.indexOf('<svg'));
+    return unsafeHTML(text);
+}
+
 /**
  * For icon names see https://materialdesignicons.com/
  */
 class Icon extends LitElement {
     constructor() {
         super();
-        this.name = "alert-circle";
-        this.color = "black";
+        this.name = "bolt";
     }
 
     static get properties() {
         return { 
           name: { type: String },
-          color: { type: String },
         };
       }
 
@@ -24,33 +67,26 @@ class Icon extends LitElement {
             :host {
                 display: inline-block;
                 height: 1em;
-                width: 1em;
+                top: .125em;
+                position: relative;
+            }
+
+            svg {
+                height: 100%;
+            }
+
+            svg path {
+                fill: currentColor;
             }
         `;
     } 
 
     render() {
-        let iconPath = commonUtils.getAssetURL('local/vpu-common/icons/' + this.name + '.json');
-        let svgPath = fetch(iconPath)
-            .then(response => {
-                if (!response.ok) {
-                    console.error("Failed to load icon: " + this.name);
-                    return "M0,0H24V24H0";
-                }
-                return response.json();
-            });
+        let svg = getSVGTextElement(this.name);
+        let placeholder = unsafeHTML('<svg></svg>');
 
         return html`
-            <style>
-                :host path {
-                    fill: currentColor;
-                }
-            </style>
-
-            <svg aria-labelledby="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="pointer-events: none; display: block; width: 100%; height: 100%;">
-                <title id="title">${this.name}</title>
-                <path d=${until(svgPath)} />
-            </svg>
+            ${until(svg, placeholder)}
         `;
     }
 }