Export vpu-icon instead of defining it always; Move demo to scoped elements

packages/common/index.js

 import {EventBus} from './src/eventbus.js';
 import {createLinkedAbortController, createTimeoutAbortSignal} from './src/abort.js';
+import {getIconSVGURL, getIconCSS, Icon} from './src/icon.js';
 
-export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
\ No newline at end of file
+export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
+export {getIconSVGURL, getIconCSS, Icon};
\ No newline at end of file

packages/common/package.json

@@ -31,6 +31,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@open-wc/scoped-elements": "^1.0.8",
     "@sentry/browser": "^5.13.2",
     "i18next": "^19.3.2",
     "lit-element": "^2.2.1"

packages/common/vpu-icon.js → packages/common/src/icon.js

 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';
+import * as commonUtils from '../utils.js';
 
 // Use in case the icon fails to load
 const errorIcon = `
@@ -74,7 +74,7 @@ async function getSVGTextElementCached(name) {
 /**
  * For icon names see https://lineicons.com
  */
-class Icon extends LitElement {
+export class Icon extends LitElement {
 
     constructor() {
         super();
@@ -112,6 +112,4 @@ class Icon extends LitElement {
             ${until(svg)}
         `;
     }
-}
-
-commonUtils.defineCustomElement('vpu-icon', Icon);
+}
\ No newline at end of file

packages/common/styles.js

 import {css, unsafeCSS, CSSResult} from 'lit-element';
-import {getIconSVGURL} from './vpu-icon.js';
+import {getIconSVGURL} from './src/icon.js';
 
 /**
  * We want to have "neutral" colors here

packages/common/vpu-common-demo.js

 import {i18n} from './i18n.js';
 import {css, html, LitElement} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonUtils from './utils.js';
 import * as commonStyles from './styles.js';
 import './vpu-mini-spinner.js';
 import './vpu-spinner.js';
-import {getIconCSS} from './vpu-icon.js';
+import {getIconCSS, Icon} from './index.js';
 import './vpu-button.js';
 
-class VpuCommonDemo extends LitElement {
+class VpuCommonDemo extends ScopedElementsMixin(LitElement) {
     constructor() {
         super();
         this.lang = 'de';
         this.noAuth = false;
     }
 
+    static get scopedElements() {
+        return {
+            'vpu-icon': Icon,
+            'vpu-mini-spinner': customElements.get('vpu-mini-spinner'),
+            'vpu-spinner': customElements.get('vpu-spinner'),
+            'vpu-button': customElements.get('vpu-button'),
+            'vpu-auth': customElements.get('vpu-auth'),
+        };
+    }
+
     static get properties() {
         return {
             lang: { type: String },