my-font-awesome.tsx

import { Component, Prop, State, Watch } from "@stencil/core";
import { icon } from "@fortawesome/fontawesome-svg-core";
import * as freeSolidFontAwesome from "@fortawesome/free-solid-svg-icons";
import * as proLightFontAwesome from "@fortawesome/pro-light-svg-icons";
import * as freeRegularFontAwesome from "@fortawesome/free-regular-svg-icons";
import * as proRegularFontAwesome from "@fortawesome/pro-regular-svg-icons";

@Component({
  tag: "my-font-awesome",
  styleUrl: "font-awesome.scss",
  shadow: false
})
export class FontAwesome {
  /**
   * Props
   */
  @Prop() icon: any;
  @Prop() size: string;
  @Prop() iconStyle: string = "solid";
  @Prop() plan: string = "free";

  /**
   *  State
   */
  @State() iconHtml;

  /**
   *  Watchers
   */
  @Watch("icon")
  iconChangedHandler(newValue) {
    this._setIcon(newValue);
  }

  /**
   * Lifecycle methods
   */

  componentWillLoad() {
    this._setIcon(this.icon);
  }

  render() {
    return this.iconHtml;
  }

  /**
   * Local methods
   */

  private _createHtmlTag(el) {
    const TagName = el.tag;
    let children = [];
    if (el.children) {
      children = el.children.map(child => this._createHtmlTag(child));
    }
    return <TagName {...el.attributes}>{children}</TagName>;
  }

  private _setIcon(selectedIcon) {
    let fontAwesome;
    switch (`${this.plan}-${this.iconStyle}`) {
      case "pro-light":
        fontAwesome = proLightFontAwesome;
        break;
      case "free-solid":
        fontAwesome = freeSolidFontAwesome;
        break;
      case "free-regular":
        fontAwesome = freeRegularFontAwesome;
        break;
      case "pro-regular":
        fontAwesome = proRegularFontAwesome;
        break;
    }

    const fontAwesomeIcon =
      typeof selectedIcon === "string"
        ? fontAwesome[selectedIcon]
        : selectedIcon;
    const classes: any = [`fa-${this.size}`];
    const iconElement = icon(fontAwesomeIcon, { classes }).abstract[0];
    this.iconHtml = this._createHtmlTag(iconElement);
  }
}