fix(core): update

package.json

@@ -13,10 +13,12 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.47",
+    "@designestate/dees-domtools": "^1.0.79",
-    "@designestate/dees-wcctools": "^1.0.37",
+    "@designestate/dees-wcctools": "^1.0.49",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-brands-svg-icons": "^5.15.1",
     "lit-element": "^2.4.0",
-    "typescript": "^4.0.2"
+    "typescript": "^4.1.2"
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.25",

ts_web/elements/dees-icon.ts

@@ -2,13 +2,33 @@ import { LitElement, html, property, customElement } from 'lit-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
+import { icon, IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { faFacebook } from '@fortawesome/free-brands-svg-icons';
+
+type TBrand = 'facebook' | 'twitter';
+const brandIcons: {[key: string]: IconDefinition} = {
+  facebook: faFacebook
+};
+
 @customElement('dees-icon')
 export class DeesIcon extends LitElement {
-  public static demo = () => html`<dees-icon iconName="visibility"></dees-icon>`;
+  public static demo = () => html`
+    <div style="background: #fff; padding: 10px;">
+      <dees-icon iconName="visibility"></dees-icon>
+      <dees-icon brandName="facebook"></dees-icon>
+    </div>
+
+    `;
 
   @property()
   public iconName: string;
 
+  @property()
+  public brandName: TBrand;
+
+  @property()
+  public svgSize: number = 20;
+
   constructor() {
     super();
     domtools.elementBasic.setup();
@@ -23,6 +43,10 @@ export class DeesIcon extends LitElement {
           line-height: inherit;
           font-size: inherit;
         }
+        #iconContainer svg {
+          display: inline-block;
+          height: ${this.svgSize}px;
+        }
         .material-icons {
           font-family: 'Material Icons';
           font-weight: normal;
@@ -49,7 +73,14 @@ export class DeesIcon extends LitElement {
           font-feature-settings: 'liga';
         }
       </style>
-      <i class="material-icons">${this.iconName}</i>
+      ${this.iconName ? html`<i class="material-icons">${this.iconName}</i>` : html``}
+      ${this.brandName ? html`<div id="iconContainer"></div>` : html``}
     `;
   }
+
+  firstUpdated() {
+    if (this.brandName && !this.iconName) {
+      this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(brandIcons[this.brandName]).html[0];
+    }
+  }
 }