From 5fdea389d1d1b394948aa0f22fa100d359f6354f Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 22 Aug 2019 16:20:10 +0200
Subject: [PATCH] Add error handling for missing icons and clean up the
template
---
packages/common/vpu-icon.js | 12 +++++++++---
1 file changed, 9 insertions(+), 3 deletions(-)
diff --git a/packages/common/vpu-icon.js b/packages/common/vpu-icon.js
index dd59ea7a..d86c61af 100644
--- a/packages/common/vpu-icon.js
+++ b/packages/common/vpu-icon.js
@@ -1,6 +1,5 @@
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';
/**
@@ -32,10 +31,17 @@ class Icon extends LitElement {
render() {
let svg = fetch('local/vpu-common/icons/' + this.name + '.json').then(response => {
+ if (!response.ok)
+ throw Error(response.statusText);
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`
+ <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=${data} />
+ </svg>
+ `;
});
- })
+ });
return html`
<style>
--
GitLab