feat(icon): enforce icon security using tagged templates

BREAKING: Icon definition requires a function using a tag passed via arguments:

```js
// myicon.svg.js

// before
export default '<svg>...</svg>';

// after
export default tag => tag`<svg>...</svg>`;
```

Application developers have an alternative shortcut to use in-place with lit-html:

```js
// MyComponent.js

// before
render() {
  return html`
    <lion-icon .svg="${'<svg>...</svg>'}"></lion-icon>
  `;
}

// after
render() {
  return html`
    <lion-icon .svg="${html`<svg>...</svg>`}"></lion-icon>
  `;
}
```

Author: Mikhail Bashkirov

packages/icon/README.md

@@ -32,6 +32,19 @@ Use it in your lit-html template:
 <lion-icon .svg=${bugSvg}></lion-icon>
 ```
 
+### Icon format
+
+Icon file is an ES module with an extension `.svg.js` which exports a function like this:
+
+```js
+// bug.svg.js
+export default tag => tag`
+  <svg focusable="false" ...>...</svg>
+`;
+```
+
+Make sure you have `focusable="false"` in the icon file to prevent bugs in IE/Edge when the icon appears in tab-order.
+
 ### Accessibiltiy
 
 You may add an `aria-label` to provide information to visually impaired users:

packages/icon/src/LionIcon.js

@@ -1,4 +1,4 @@
-import { html, css, LitElement } from '@lion/core';
+import { html, nothing, TemplateResult, css, render, LitElement } from '@lion/core';
 
 const isPromise = action => typeof action === 'object' && Promise.resolve(action) === action;
 
@@ -11,7 +11,7 @@ export class LionIcon extends LitElement {
     return {
       // svg is a property to ensure the setter is called if the property is set before upgrading
       svg: {
-        type: String,
+        type: Object,
       },
       role: {
         type: String,
@@ -84,17 +84,17 @@ export class LionIcon extends LitElement {
   set svg(svg) {
     this.__svg = svg;
     if (svg === undefined) {
-      this._renderSvg('');
+      this._renderSvg(nothing);
     } else if (isPromise(svg)) {
-      this._renderSvg(''); // show nothing before resolved
+      this._renderSvg(nothing); // show nothing before resolved
       svg.then(resolvedSvg => {
         // render only if it is still the same and was not replaced after loading started
         if (svg === this.__svg) {
-          this._renderSvg(resolvedSvg);
+          this._renderSvg(this.constructor.__unwrapSvg(resolvedSvg));
         }
       });
     } else {
-      this._renderSvg(svg);
+      this._renderSvg(this.constructor.__unwrapSvg(svg));
     }
   }
 
@@ -111,8 +111,22 @@ export class LionIcon extends LitElement {
     }
   }
 
-  _renderSvg(svgOrModule) {
-    const svg = svgOrModule && svgOrModule.default ? svgOrModule.default : svgOrModule;
-    this.innerHTML = svg;
+  _renderSvg(svgObject) {
+    this.constructor.__validateSvg(svgObject);
+    render(svgObject, this);
+  }
+
+  static __unwrapSvg(wrappedSvgObject) {
+    const svgObject =
+      wrappedSvgObject && wrappedSvgObject.default ? wrappedSvgObject.default : wrappedSvgObject;
+    return typeof svgObject === 'function' ? svgObject(html) : svgObject;
+  }
+
+  static __validateSvg(svg) {
+    if (!(svg === nothing || svg instanceof TemplateResult)) {
+      throw new Error(
+        'icon accepts only lit-html templates or functions like "tag => tag`<svg>...</svg>`"',
+      );
+    }
   }
 }