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"">@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>
<FontAwesomeIcon icon={['fas', 'smile-wink']} ></FontAwesomeIcon>
<!-- The solid style is implicit -->
<FontAwesomeIcon icon="smile-wink" ></FontAwesomeIcon>

Features

Basic

Size

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

Fixed width

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

Rotate

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

Flip

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

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

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

Spin and pulse animation

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

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

Border

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

Pull left or right

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

Invert

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

Swap opacity

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

Advanced

Power transforms

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

Masking

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

Symbols

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

Layers

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