fontawesome-svelte
v2.0.1 fontawesome svelte sveltejs svelte3 icons front-end
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(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)
npm i fontawesome-svelte
Metadata
- MIT
- Whatever
- Kirill Sedunov
- released 12/30/2020