dees-catalog/ts_web/elements/dees-icon.ts

import { DeesElement, html, property, customElement } from '@designestate/dees-element';

import * as domtools from '@designestate/dees-domtools';

import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
import {
  faFacebook,
  faGoogle,
  faLinkedin,
  faMedium,
  faSlackHash,
  faTwitter,
  faInstagram,
  faTiktok,
} from '@fortawesome/free-brands-svg-icons';

import {
  faMessage as faMessageRegular,
  faSun as faSunRegular,
} from '@fortawesome/free-regular-svg-icons';
import {
  faBell as faBellSolid,
  faBug as faBugSolid,
  faCircleInfo as faCircleInfoSolid,
  faDesktop as faDesktopSolid,
  faGrip as faGripSolid,
  faMessage as faMessageSolid,
  faRss as faRssSolid,
  faUsers as faUsersSolid,
  faShare as faShareSolid,
  faSun as faSunSolid,
} from '@fortawesome/free-solid-svg-icons';

export const faIcons = {
  // normal
  bell: faBellSolid,
  bellSolid: faBellSolid,
  bug: faBugSolid,
  bugSolid: faBugSolid,
  circleinfo: faCircleInfoSolid,
  circleinfoSolid: faCircleInfoSolid,
  desktop: faDesktopSolid,
  desktopSolid: faDesktopSolid,
  grip: faGripSolid,
  gripSolid: faGripSolid,
  message: faMessageRegular,
  messageSolid: faMessageSolid,
  rss: faRssSolid,
  rssSolid: faRssSolid,
  share: faShareSolid,
  shareSolid: faShareSolid,
  sun: faSunRegular,
  sunSolid: faSunSolid,
  // brands
  facebook: faFacebook,
  google: faGoogle,
  instagram: faInstagram,
  linkedin: faLinkedin,
  medium: faMedium,
  slack: faSlackHash,
  tiktok: faTiktok,
  twitter: faTwitter,
  users: faUsersSolid,
};

declare global {
  interface HTMLElementTagNameMap {
    'dees-icon': DeesIcon;
  }
}

@customElement('dees-icon')
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 iconFA="messageSolid"></dees-icon>
      <dees-icon iconFA="sun"></dees-icon>
      <dees-icon iconFA="sunSolid"></dees-icon>
      <dees-icon iconFA="facebook"></dees-icon>
    </div>
  `;

  @property()
  public iconFA: keyof typeof faIcons;

  @property()
  public iconSize: number = 20;

  constructor() {
    super();
    domtools.elementBasic.setup();
  }

  public render() {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        :host {
          display: block;
          white-space: nowrap;
        }
        #iconContainer svg {
          display: inline-block;
          height: ${this.iconSize}px;
        }
      </style>
      <div id="iconContainer"></div>
    `;
  }

  public async firstUpdated() {
    if (this.iconFA) {
      this.shadowRoot.querySelector('#iconContainer').innerHTML = this.iconFA
        ? icon(faIcons[this.iconFA]).html[0]
        : 'icon not found';
    }
  }
}