wc-fontawesome

Web component integration with Font Awesome (v5)

Installation

Libraries

yarn add wc-fontawesome @fortawesome/fontawesome-svg-core

Icons

yarn add @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons

Usage

import 'wc-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas, faSpinner } from '@fortawesome/free-solid-svg-icons'

// add all solid icons...
library.add(fas)
// ... or individually
library.add(faSpinner)

<fa-icon icon="spinner"></fa-icon>

Examples

Look at the provided example: clone repository, install dependencies and run npm start script or check the live example.

With shadow Dom

Font Awesome is implemented using global styles which do not work in web components that renders in shadow Dom.

To use wc-fontawesome along side shadow Dom is necessary to add the Font Awesome css in the component. See example below or check how can be done using LitElement styling system.

import { dom } from '@fortawesome/fontawesome-svg-core'

class ElementWithIcons extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({ mode: 'open' })
    shadow.innerHTML = `
      <style>
        ${dom.css()}
      </style>
      <fa-icon name="spinner"></fa-icon>
    `
  }
}

Alternatively, enable the usage of shadow Dom in fa-icon component. This will allow to use it in any web component with the drawback of breaking layers functionality:

import { configure } from 'wc-fontawesome'

configure({ shadowDom: true })

Components

• fa-icon: show icon defined by icon or name property
• fa-text: show text in layers
• fa-counter: show counter in layers
• fa-layers: container for layers (experimental - use div with fa-layers class instead)

Features

The following features are implemented

Basic

Size:

<fa-icon icon="spinner" size="xs"></fa-icon>
<fa-icon icon="spinner" size="lg"></fa-icon>
<fa-icon icon="spinner" size="6x"></fa-icon>

Note that icon size can be controlled with the CSS font-size attribute, and fa-icon's size prop determines icon size relative to the current font-size.

Fixed width:

<fa-icon icon="spinner" fixed-width></fa-icon>

Inverse:

<fa-icon icon="spinner" inverse></fa-icon>

List Items:

<fa-icon icon="spinner" list-item></fa-icon>

Rotate:

<fa-icon icon="spinner" rotation="90"></fa-icon>
<fa-icon icon="spinner" rotation="180"></fa-icon>
<fa-icon icon="spinner" rotation="270"></fa-icon>

Flip horizontally, vertically, or both:

<fa-icon icon="spinner" flip="horizontal"></fa-icon>
<fa-icon icon="spinner" flip="vertical"></fa-icon>
<fa-icon icon="spinner" flip="both"></fa-icon>

Spin and pulse animation:

<fa-icon icon="spinner" spin></fa-icon> <fa-icon icon="spinner" pulse></fa-icon>

Border:

<fa-icon icon="spinner" border></fa-icon>

Pull left or right:

<fa-icon icon="spinner" pull="left"></fa-icon>
<fa-icon icon="spinner" pull="right"></fa-icon>

Swap opacity (duotone icons only):

<fa-icon icon="stroopwafel"></fa-icon>
<fa-icon icon="stroopwafel" swap-opacity></fa-icon>

Advanced

Power Transforms:

<fa-icon icon="spinner" transform="shrink-6 left-4"></fa-icon>

Masking:

<fa-icon icon="coffee" mask="circle"></fa-icon>

Symbols:

<fa-icon icon="edit" symbol></fa-icon>
<fa-icon icon="edit" symbol="edit-icon"></fa-icon>

Layers:

Simple

<span class="fa-layers fa-fw">
  <fa-icon icon="square"></fa-icon>
  <fa-icon icon="check" inverse transform="shrink-6"></fa-icon>
</span>

With text

<span class="fa-layers fa-fw" style="background:MistyRose">
  <fa-icon icon="certificate"></fa-icon>
  <fa-text inverse transform="shrink-11.5 rotate--30" style="font-weight:900"
    >NEW</fa-text
  >
</span>

With counter

<span class="fa-layers fa-fw" style="background:MistyRose">
  <fa-icon icon="envelope"></fa-icon>
  <fa-counter style="background:Tomato">1,419</fa-counter>
</span>

Copyright

2019 - Luiz Américo Pereira Câmara

Ported from react-fontawesome