fix(core): update

ts_web/elements/dees-icon.ts

@@ -14,27 +14,36 @@ import {
   faTiktok,
 } from '@fortawesome/free-brands-svg-icons';
 
-import {} from '@fortawesome/free-regular-svg-icons';
-import { faDesktop, faRss, faUsers } from '@fortawesome/free-solid-svg-icons';
+import {
+  faMessage as faMessageRegular,
+  faSun as faSunRegular,
+} from '@fortawesome/free-regular-svg-icons';
+import {
+  faBell as faBellSolid,
+  faBug as faBugSolid,
+  faDesktop as faDesktopSolid,
+  faRss as faRssSolid,
+  faUsers as faUsersSolid,
+  faSun as faSunSolid,
+  faGrip as faGripSolid,
+} from '@fortawesome/free-solid-svg-icons';
 
-type TFontAwesomeIcon =
+export const faIcons = {
   // normal
-  | 'desktop'
-  | 'rss'
-  // brands
-  | 'facebook'
-  | 'google'
-  | 'linkedin'
-  | 'instagram'
-  | 'medium'
-  | 'slack'
-  | 'tiktok'
-  | 'twitter'
-  | 'users';
-const faIcons: { [key: string]: IconDefinition } = {
-  // normal
-  desktop: faDesktop,
-  rss: faRss,
+  bell: faBellSolid,
+  bellSolid: faBellSolid,
+  bug: faBugSolid,
+  bugSolid: faBugSolid,
+  desktop: faDesktopSolid,
+  desktopSolid: faDesktopSolid,
+  grip: faGripSolid,
+  gripSolid: faGripSolid,
+  message: faMessageRegular,
+  messageSolid: faMessageRegular,
+  rss: faRssSolid,
+  rssSolid: faRssSolid,
+  sun: faSunRegular,
+  sunSolid: faSunSolid,
   // brands
   facebook: faFacebook,
   google: faGoogle,
@@ -44,7 +53,7 @@ const faIcons: { [key: string]: IconDefinition } = {
   slack: faSlackHash,
   tiktok: faTiktok,
   twitter: faTwitter,
-  users: faUsers,
+  users: faUsersSolid,
 };
 
 declare global {
@@ -58,21 +67,18 @@ export class DeesIcon extends DeesElement {
   public static demo = () => html`
     <dees-icon iconName="visibility"></dees-icon>
     <div style="background: #fff; padding: 10px; font-size: 24px">
-      <dees-icon iconName="visibility"></dees-icon>
-      <dees-icon iconName="info"></dees-icon>
-      <dees-icon iconName="brightness_4"></dees-icon>
-      <dees-icon brandName="facebook"></dees-icon>
+      <dees-icon iconFA="message"></dees-icon>
+      <dees-icon iconFA="sun"></dees-icon>
+      <dees-icon iconFA="sunSolid"></dees-icon>
+      <dees-icon iconFA="facebook"></dees-icon>
     </div>
   `;
 
   @property()
-  public iconName: string;
+  public iconFA: keyof typeof faIcons;
 
   @property()
-  public brandName: TFontAwesomeIcon;
-
-  @property()
-  public svgSize: number = 20;
+  public iconSize: number = 20;
 
   constructor() {
     super();
@@ -85,48 +91,24 @@ export class DeesIcon extends DeesElement {
       <style>
         :host {
           display: block;
-          line-height: inherit;
-          font-size: inherit;
           margin: 0px;
           padding: 0px;
           white-space: nowrap;
         }
         #iconContainer svg {
           display: inline-block;
-          height: ${this.svgSize}px;
-        }
-        .material-symbols-outlined {
-          font-family: 'Material Symbols Outlined';
-          font-weight: normal;
-          font-style: normal;
-          line-height: inherit;
-          font-size: inherit; /* Preferred icon size */
-          display: inline-block;
-          text-transform: none;
-          letter-spacing: normal;
-          word-wrap: normal;
-          white-space: nowrap;
-          direction: ltr;
-          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
+          height: ${this.iconSize}px;
         }
       </style>
-      ${this.iconName
-        ? html`
-          <i 
-            class="material-symbols-outlined"
-          >
-            ${this.iconName}
-          </i>`
-        : html``}
-      ${this.brandName ? html`<div id="iconContainer"></div>` : html``}
+      <div id="iconContainer"></div>
     `;
   }
 
   public async firstUpdated() {
-    if (this.brandName && !this.iconName) {
-      this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
-        faIcons[this.brandName]
-      ).html[0];
+    if (this.iconFA) {
+      this.shadowRoot.querySelector('#iconContainer').innerHTML = this.iconFA
+        ? icon(faIcons[this.iconFA]).html[0]
+        : 'icon not found';
     }
   }
 }