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

import { LitElement, html, property, customElement } from 'lit-element';

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

import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
import {
  faFacebook,
  faGoogle,
  faLinkedin,
  faMedium,
  faSlackHash,
  faTwitter,
} 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'
  | 'twitter'
  | 'linkedin'
  | 'medium'
  | 'slack'
  | 'users';
const faIcons: { [key: string]: IconDefinition } = {
  // normal
  desktop: faDesktop,
  rss: faRss,
  // brands
  facebook: faFacebook,
  google: faGoogle,
  linkedin: faLinkedin,
  medium: faMedium,
  slack: faSlackHash,
  twitter: faTwitter,
  users: faUsers,
};

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

@customElement('dees-icon')
export class DeesIcon extends LitElement {
  public static demo = () => html`
    <div style="background: #fff; padding: 10px;">
      <dees-icon iconName="visibility"></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;
        }
        #iconContainer svg {
          display: inline-block;
          height: ${this.svgSize}px;
        }
        .material-icons {
          font-family: 'Material Icons';
          font-weight: normal;
          font-style: normal;
          line-height: inherit;
          font-size: inherit;
          display: inline-block;
          line-height: inherit;
          text-transform: none;
          letter-spacing: normal;
          word-wrap: normal;
          white-space: nowrap;
          direction: ltr;

          /* Support for all WebKit browsers. */
          -webkit-font-smoothing: antialiased;
          /* Support for Safari and Chrome. */
          text-rendering: optimizeLegibility;

          /* Support for Firefox. */
          -moz-osx-font-smoothing: grayscale;

          /* Support for IE. */
          font-feature-settings: 'liga';
        }
      </style>
      ${this.iconName ? html`<i class="material-icons">${this.iconName}</i>` : html``}
      ${this.brandName ? html`<div id="iconContainer"></div>` : html``}
    `;
  }

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