@jensk/lit-fontawesome v0.0.12

Lit Fontawesome

Warning: @jensk/lit-fontawesome is currently in experimental stages of development. Expect bugs, missing features, and a volatile API.

Usage

<fa-icon>

// import the icon you want to display
import { faXmark } from "@fortawesome/free-solid-svg-icons";

// import <fa-icon> in either of 3 ways
// ===== 1. =====
import("@jensk/lit-fontawesome/components/fa-icon");
// ===== 2. =====
import "@jensk/lit-fontawesome/components/fa-icon";
// ===== 3. =====
import { FontAwesomeIcon } from "@jensk/lit-fontawesome";

customElements.define("fa-icon", FontAwesomeIcon);
// ==============
...

protected render() {
  // use the icon in the template
  return html`<fa-icon
    .size="${ "2x"}"
    .icon="${ faXmark }"
    .flash="${ true }"
  ></fa-icon>`;
}

<fa-layer>

Disclaimer

<fa-layer> currently has issues applying transforms properly and is generally unstable and experimental. Proceed with caution

// import the icon you want to display
import { faCircle, faTimes } from "@fortawesome/free-solid-svg-icons";

// import <fa-layer> in either of 3 ways
// ===== 1. =====
import("@jensk/lit-fontawesome/components/fa-layer");
// ===== 2. =====
import "@jensk/lit-fontawesome/components/fa-layer";
// ===== 3. =====
import { FontAwesomeLayer } from "@jensk/lit-fontawesome";

customElements.define("fa-layer", FontAwesomeLayer);
// ==============
...

protected render() {
  // use the icon layers in the template
  return html`<fa-layer>
      <fa-icon style="color: red;" .icon="${faCircle}"></fa-icon>
      <fa-icon style="color: blue;" .icon="${faTimes}"></fa-icon>
    </fa-layer>`
}