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 {} from '@fortawesome/free-regular-svg-icons';
import { faDesktop, faRss, faUsers } from '@fortawesome/free-solid-svg-icons';

type TFontAwesomeIcon =
  // normal
  | 'desktop'
  | 'rss'
  // brands
  | 'facebook'
  | 'google'
  | 'linkedin'
  | 'instagram'
  | 'medium'
  | 'slack'
  | 'tiktok'
  | 'twitter'
  | 'users';
const faIcons: { [key: string]: IconDefinition } = {
  // normal
  desktop: faDesktop,
  rss: faRss,
  // brands
  facebook: faFacebook,
  google: faGoogle,
  instagram: faInstagram,
  linkedin: faLinkedin,
  medium: faMedium,
  slack: faSlackHash,
  tiktok: faTiktok,
  twitter: faTwitter,
  users: faUsers,
};

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 iconName="visibility"></dees-icon>
      <dees-icon iconName="info"></dees-icon>
      <dees-icon iconName="brightness_4"></dees-icon>
      <dees-icon brandName="facebook"></dees-icon>
    </div>
  `;

  @property()
  public iconName: string;

  @property()
  public brandName: TFontAwesomeIcon;

  @property()
  public svgSize: number = 20;

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

  public render() {
    return html`
      ${domtools.elementBasic.styles}
      <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;
        }
      </style>
      ${this.iconName
        ? html`
          <i 
            class="material-symbols-outlined"
          >
            ${this.iconName}
          </i>`
        : html``}
      ${this.brandName ? html`<div id="iconContainer"></div>` : html``}
    `;
  }

  public async firstUpdated() {
    if (this.brandName && !this.iconName) {
      this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
        faIcons[this.brandName]
      ).html[0];
    }
  }
}