fix(core): update

package-lock.json

@@ -1198,6 +1198,22 @@
         "@fortawesome/fontawesome-common-types": "^0.2.32"
       }
     },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "5.15.1",
+      "resolved": "https://verdaccio.lossless.one/@fortawesome%2ffree-regular-svg-icons/-/free-regular-svg-icons-5.15.1.tgz",
+      "integrity": "sha512-eD9NWFy89e7SVVtrLedJUxIpCBGhd4x7s7dhesokjyo1Tw62daqN5UcuAGu1NrepLLq1IeAYUVfWwnOjZ/j3HA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.1",
+      "resolved": "https://verdaccio.lossless.one/@fortawesome%2ffree-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
+      "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
     "@gitzone/tsbuild": {
       "version": "2.1.25",
       "resolved": "https://verdaccio.lossless.one/@gitzone%2ftsbuild/-/tsbuild-2.1.25.tgz",

package.json

@@ -17,6 +17,8 @@
     "@designestate/dees-wcctools": "^1.0.49",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "lit-element": "^2.4.0",
     "typescript": "^4.1.2"
   },

ts_web/elements/dees-icon.ts

@@ -2,15 +2,41 @@ import { LitElement, html, property, customElement } from 'lit-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
-import { icon, IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { faFacebook, faTwitter, faLinkedin, faMedium } from '@fortawesome/free-brands-svg-icons';
+import {
+  faFacebook,
+  faGoogle,
+  faLinkedin,
+  faMedium,
+  faSlack,
+  faTwitter,
+} from '@fortawesome/free-brands-svg-icons';
 
-type TBrand = 'facebook' | 'twitter' | 'linkedin' | 'medium';
+import {} from '@fortawesome/free-regular-svg-icons';
-const brandIcons: {[key: string]: IconDefinition} = {
+import { faDesktop, faRss } from '@fortawesome/free-solid-svg-icons';
+
+type TFontAwesomeIcon =
+  // normal
+  | 'desktop'
+  | 'rss'
+  // brands
+  | 'facebook'
+  | 'google'
+  | 'twitter'
+  | 'linkedin'
+  | 'medium'
+  | 'slack';
+const faIcons: { [key: string]: IconDefinition } = {
+  // normal
+  desktop: faDesktop,
+  rss: faRss,
+  // brands
   facebook: faFacebook,
-  twitter: faTwitter,
+  google: faGoogle,
   linkedin: faLinkedin,
-  medium: faMedium
+  medium: faMedium,
+  slack: faSlack,
+  twitter: faTwitter,
 };
 
 @customElement('dees-icon')
@@ -20,14 +46,13 @@ export class DeesIcon extends LitElement {
       <dees-icon iconName="visibility"></dees-icon>
       <dees-icon brandName="facebook"></dees-icon>
     </div>
-
+  `;
-    `;
 
   @property()
   public iconName: string;
 
   @property()
-  public brandName: TBrand;
+  public brandName: TFontAwesomeIcon;
 
   @property()
   public svgSize: number = 20;
@@ -83,7 +108,9 @@ export class DeesIcon extends LitElement {
 
   firstUpdated() {
     if (this.brandName && !this.iconName) {
-      this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(brandIcons[this.brandName]).html[0];
+      this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
+        faIcons[this.brandName]
+      ).html[0];
     }
   }
 }