diff --git a/packages/common/package.json b/packages/common/package.json
index e69e99d115be452ecfa4e2b6a65241e4d3b86f9e..9eb45ee185ba10bc2f3696e5b43f847a3fdbe7ac 100644
--- a/packages/common/package.json
+++ b/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"
}
}
diff --git a/packages/common/rollup.config.js b/packages/common/rollup.config.js
index df03bbdc45b68b63bb4e92e15a59f4c3b1da40c4..be3234b91424e106bebb8e515dcd8cc1c83172b6 100644
--- a/packages/common/rollup.config.js
+++ b/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
diff --git a/packages/common/vpu-common-demo.js b/packages/common/vpu-common-demo.js
index 304138331fa21f4f916b986612e1ada34d552ae1..60d4c96e468e9ed552f54d7765bc45d2a7d87cf8 100644
--- a/packages/common/vpu-common-demo.js
+++ b/packages/common/vpu-common-demo.js
@@ -1,9 +1,9 @@
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">
diff --git a/packages/common/vpu-icon.js b/packages/common/vpu-icon.js
index 2d2d3218355d4b19d919131053fb980ba2f06768..e3c2ed11467d346ab56153e5ad19a830205f721a 100644
--- a/packages/common/vpu-icon.js
+++ b/packages/common/vpu-icon.js
@@ -1,21 +1,64 @@
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)}
`;
}
}