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.
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" />
<FontAwesomeIcon icon={['fas', 'smile-wink']} size="xs" />
<FontAwesomeIcon icon={['fas', 'smile-wink']} size="lg" />
<FontAwesomeIcon icon={['fas', 'smile-wink']} size="6x" />
<FontAwesomeIcon icon={['fas', 'smile-wink']} fixedWidth={true} />
<FontAwesomeIcon icon={['fas', 'smile-wink']} rotation={180} />
<FontAwesomeIcon icon={['fas', 'smile-wink']} flip="horizontal" />
<FontAwesomeIcon icon={['fas', 'smile-wink']} flip="vertical" />
<FontAwesomeIcon icon={['fas', 'smile-wink']} flip="both" />
<FontAwesomeIcon icon={['fas', 'smile-wink']} spin={true} />
<FontAwesomeIcon icon={['fas', 'smile-wink']} pulse={true} />
<FontAwesomeIcon icon={['fas', 'smile-wink']} border={true} />
<FontAwesomeIcon icon={['fas', 'smile-wink']} pull="left" />
<FontAwesomeIcon icon={['fas', 'smile-wink']} pull="right" />
<FontAwesomeIcon icon={['fas', 'smile-wink']} inverse={true} />
<FontAwesomeIcon icon={['fas', 'smile-wink']} swapOpacity={true} />
<FontAwesomeIcon icon={['fas', 'smile-wink']} transform="shrink-6 left-4" />
<FontAwesomeIcon icon={['fas', 'smile-wink']} transform={ { rotate: 45 } } />
<FontAwesomeIcon icon={['fas', 'pencil-alt']} mask={['fas', 'comment']} transform="shrink-10 up-.5" />
<FontAwesomeIcon icon={fasPencilAlt} mask={fasComment} transform="shrink-10 up-.5">
<FontAwesomeIcon icon={['fas', 'pencil-alt']} symbol={true} />
<FontAwesomeIcon icon={['fas', 'pencil-alt']} symbol="pencil-alt" />
<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>
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)