fontawesome-svelte

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(fasSmileWink);
</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)