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 byicon
orname
property -
fa-text
: show text in layers -
fa-counter
: show counter in layers -
fa-layers
: container for layers (experimental - usediv
withfa-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
.
<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>
Advanced
<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>
Copyright
2019 - Luiz Américo Pereira Câmara
Ported from react-fontawesome