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

import {
  DeesElement,
  html,
  property,
  customElement,
  cssManager,
  css,
} 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 {
  faArrowUpRightFromSquare as faArrowUpRightFromSquareSolid,
  faBell as faBellSolid,
  faBug as faBugSolid,
  faBuilding as faBuildingSolid,
  faCaretLeft as faCaretLeftSolid,
  faCircleInfo as faCircleInfoSolid,
  faDesktop as faDesktopSolid,
  faGrip as faGripSolid,
  faMessage as faMessageSolid,
  faRss as faRssSolid,
  faUsers as faUsersSolid,
  faShare as faShareSolid,
  faSun as faSunSolid,
  faXmark as faXmarkSolid,
} from '@fortawesome/free-solid-svg-icons';

export const faIcons = {
  // normal
  arrowUpRightFromSquare: faArrowUpRightFromSquareSolid,
  arrowUpRightFromSquareSolid: faArrowUpRightFromSquareSolid,
  bell: faBellSolid,
  bellSolid: faBellSolid,
  bug: faBugSolid,
  bugSolid: faBugSolid,
  building: faBuildingSolid,
  buildingSolid: faBuildingSolid,
  caretLeft: faCaretLeftSolid,
  caretLeftSolid: faCaretLeftSolid,
  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,
  xmark: faXmarkSolid,
  xmarkSolid: faXmarkSolid,
  // 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: 30px">
      <style>
        dees-icon {
          transition: color 0.05s;
        }
        dees-icon:hover {
          color: #e4002b;
        }
      </style>
      <dees-icon .iconFA=${'messageSolid'}></dees-icon>
      <dees-icon .iconFA=${'sun'}></dees-icon>
      <dees-icon .iconFA=${'sunSolid'}></dees-icon>
      <dees-icon .iconFA=${'facebook'}></dees-icon>
      <dees-icon .iconFA=${'arrowUpRightFromSquare'}></dees-icon>
    </div>
  `;

  @property({
    type: String
  })
  public iconFA: keyof typeof faIcons;

  @property()
  public iconSize: number;

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

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      * {
        transition: inherit !important;
      }
    `,
  ];

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

  public async firstUpdated() {
    if (!this.iconSize) {
      this.iconSize = parseInt(globalThis.getComputedStyle(this).fontSize.replace(/\D/g,''));
    }
    if (this.iconFA) {
      this.shadowRoot.querySelector('#iconContainer').innerHTML = this.iconFA
        ? icon(faIcons[this.iconFA]).html[0]
        : 'icon not found';
    }
  }
}