Web component integration with Font Awesome (v5)
Libraries
yarn add wc-fontawesome @fortawesome/fontawesome-svg-core
Icons
yarn add @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons
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>
Look at the provided example: clone repository, install dependencies and run npm start
script or check the live example.
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 })
fa-icon
: show icon defined byicon
orname
propertyfa-text
: show text in layersfa-counter
: show counter in layersfa-layers
: container for layers (experimental - usediv
withfa-layers
class instead)
The following features are implemented
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
.
<fa-icon icon="spinner" fixed-width></fa-icon>
Inverse:
<fa-icon icon="spinner" inverse></fa-icon>
<fa-icon icon="spinner" list-item></fa-icon>
<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>
<fa-icon icon="spinner" border></fa-icon>
<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>
<fa-icon icon="spinner" transform="shrink-6 left-4"></fa-icon>
<fa-icon icon="coffee" mask="circle"></fa-icon>
<fa-icon icon="edit" symbol></fa-icon>
<fa-icon icon="edit" symbol="edit-icon"></fa-icon>
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>
2019 - Luiz Américo Pereira Câmara
Ported from react-fontawesome