From 8db73791500e0e35e30e2be9bd960f4e7696d0ba Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 22 Aug 2019 14:32:33 +0200
Subject: [PATCH] Add a vpu-icon web component
---
packages/common/assets/index.html | 2 ++
packages/common/demo.js | 1 +
packages/common/package.json | 1 +
packages/common/rollup.config.js | 2 ++
packages/common/vpu-icon.js | 52 +++++++++++++++++++++++++++++++
5 files changed, 58 insertions(+)
create mode 100644 packages/common/vpu-icon.js
diff --git a/packages/common/assets/index.html b/packages/common/assets/index.html
index 4efb70df..cccf567d 100644
--- a/packages/common/assets/index.html
+++ b/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>
diff --git a/packages/common/demo.js b/packages/common/demo.js
index a45bd8f3..ed74f311 100644
--- a/packages/common/demo.js
+++ b/packages/common/demo.js
@@ -1,2 +1,3 @@
import './vpu-mini-spinner.js';
import './vpu-spinner.js';
+import './vpu-icon.js';
\ No newline at end of file
diff --git a/packages/common/package.json b/packages/common/package.json
index 4ae268f9..c5d5ac1d 100644
--- a/packages/common/package.json
+++ b/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",
diff --git a/packages/common/rollup.config.js b/packages/common/rollup.config.js
index ad003fb6..e27f228d 100644
--- a/packages/common/rollup.config.js
+++ b/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
diff --git a/packages/common/vpu-icon.js b/packages/common/vpu-icon.js
new file mode 100644
index 00000000..f21a5a80
--- /dev/null
+++ b/packages/common/vpu-icon.js
@@ -0,0 +1,52 @@
+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);
--
GitLab