Add a vpu-icon web component

packages/common/assets/index.html

@@ -20,5 +20,7 @@
     Spinner: <vpu-spinner></vpu-spinner>
 </p>
 
+Icons: <vpu-icon name="access-point-network-off"></vpu-icon> <vpu-icon color="green"></vpu-icon> <vpu-icon color="red"></vpu-icon> <vpu-icon color="blue"></vpu-icon>
+
 </body>
 </html>

packages/common/demo.js

 import './vpu-mini-spinner.js';
 import './vpu-spinner.js';
+import './vpu-icon.js';
\ No newline at end of file

packages/common/package.json

@@ -8,6 +8,7 @@
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.0.0",
     "karma-mocha": "^1.3.0",
+    "material-design-icons-svg": "^3.0.0",
     "mocha": "^6.2.0",
     "node-sass": "^4.12.0",
     "puppeteer": "^1.15.0",

packages/common/rollup.config.js

@@ -6,6 +6,7 @@ import multiEntry from 'rollup-plugin-multi-entry';
 import copy from 'rollup-plugin-copy';
 import serve from 'rollup-plugin-serve';
 
+const pkg = require('./package.json');
 const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
 console.log("build: " + build);
 
@@ -32,6 +33,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'},
             ],
         }),
         (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false

packages/common/vpu-icon.js

+import {html, LitElement, css} from 'lit-element';
+import {until} from 'lit-html/directives/until.js';
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
+import * as commonUtils from './utils.js';
+
+/**
+ * For icon names see https://materialdesignicons.com/
+ */
+class Icon extends LitElement {
+    constructor() {
+        super();
+        this.name = "alert-circle";
+        this.color = "black";
+    }
+
+    static get properties() {
+        return { 
+          name: { type: String },
+          color: { type: String },
+        };
+      }
+
+    static get styles() {
+        return css`
+            :host {
+                display: inline-block;
+                height: 1em;
+                width: 1em;
+            }
+        `;
+    } 
+
+    render() {
+        let svg = fetch('/local/vpu-common/icons/' + this.name + '.json').then(response => {
+            return response.json().then(data => {
+                return unsafeHTML('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="pointer-events: none; display: block; width: 100%; height: 100%;">' +'<path d="' + data + '" />' + '</svg>');
+            });
+        })
+
+        return html`
+            <style>
+                :host path {
+                    fill: ${this.color};
+                }
+            </style>
+
+            ${until(svg)}
+        `;
+    }
+}
+
+commonUtils.defineCustomElement('vpu-icon', Icon);