README

fontawesome-svelte

npm npm bundle size GitHub Workflow Status (branch) David David

Introduction

This package is for integrating FontAwesome with Svelte. Inspired by vue-fontawesome.

Under the hood this package uses @fortawesome/fontawesome-svg-core library. You can find API docs here.

Usage

This package relies on @fortawesome/fontawesome-svg-core.

Maybe you're looking for "Add more styles or Pro icons".

Keep in mind that using Pro packages requires additional configuration.

<script>
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSmileWink as fasSmileWink } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from 'fontawesome-svelte';

library.add(faSmileWink);
</script>

<FontAwesomeIcon icon={fasSmileWink} />
<FontAwesomeIcon icon={['fas', 'smile-wink']} />
<!-- The solid style is implicit -->
<FontAwesomeIcon icon="smile-wink" />

Features

Basic

Size

<FontAwesomeIcon icon={['fas', 'smile-wink']} size="xs" />
<FontAwesomeIcon icon={['fas', 'smile-wink']} size="lg" />
<FontAwesomeIcon icon={['fas', 'smile-wink']} size="6x" />

Fixed width

<FontAwesomeIcon icon={['fas', 'smile-wink']} fixedWidth={true} />

Rotate

<FontAwesomeIcon icon={['fas', 'smile-wink']} rotation={180} />

Flip

<FontAwesomeIcon icon={['fas', 'smile-wink']} flip="horizontal" />

<FontAwesomeIcon icon={['fas', 'smile-wink']} flip="vertical" />

<FontAwesomeIcon icon={['fas', 'smile-wink']} flip="both" />

Spin and pulse animation

<FontAwesomeIcon icon={['fas', 'smile-wink']} spin={true} />

<FontAwesomeIcon icon={['fas', 'smile-wink']} pulse={true} />

Border

<FontAwesomeIcon icon={['fas', 'smile-wink']} border={true} />

Pull left or right

<FontAwesomeIcon icon={['fas', 'smile-wink']} pull="left" />
<FontAwesomeIcon icon={['fas', 'smile-wink']} pull="right" />

Invert

<FontAwesomeIcon icon={['fas', 'smile-wink']} inverse={true} />

Swap opacity

<FontAwesomeIcon icon={['fas', 'smile-wink']} swapOpacity={true} />

Advanced

Power transforms

<FontAwesomeIcon icon={['fas', 'smile-wink']} transform="shrink-6 left-4" />
<FontAwesomeIcon icon={['fas', 'smile-wink']} transform={ { rotate: 45 } } />

Masking

<FontAwesomeIcon icon={['fas', 'pencil-alt']} mask={['fas', 'comment']} transform="shrink-10 up-.5" />
<FontAwesomeIcon icon={fasPencilAlt} mask={fasComment} transform="shrink-10 up-.5">

Symbols

<FontAwesomeIcon icon={['fas', 'pencil-alt']} symbol={true} />
<FontAwesomeIcon icon={['fas', 'pencil-alt']} symbol="pencil-alt" />

Layers

<FontAwesomeLayers class="fa-6x">
  <FontAwesomeIcon icon={['fas', 'circle']} style="color: tomato" />
  <FontAwesomeIcon icon={['fas', 'times']} transform="shrink-6" inverse={true} />
</FontAwesomeLayers>
<FontAwesomeLayers class="fa-6x">
  <FontAwesomeIcon icon={['fas', 'certificate']} />
  <FontAwesomeLayersText class="fa-inverse" transform="shrink-11.5 rotate--30" style="font-weight: 900; font-family: sans-serif;" value="NEW" />
</FontAwesomeLayers>
<FontAwesomeLayers class="fa-6x">
  <FontAwesomeIcon icon={['fas', 'envelope']} />
  <FontAwesomeLayersText counter={true} style="background: tomato; font-family: sans-serif;" value="1,419" />
</FontAwesomeLayers>

Usage with Sapper

Be aware, that you'll need to install this package as dev dependency in order to get it working with Sapper (according to this issue)

Usage no npm install needed!