fa-svelte
(For svelte v2, use fa-svelte v1.x.x)
About
A simple minimalistic lightweight svelte component for Font Awesome SVG icons.
- Small footprint
- Only used icons will be bundled
- No dependencies
- Only SVG (no fonts)
- Does not require additional CSS files
This library is currently not intended to be fully featured, it is the option when size and speed is of importance.
Installation
Install as a development dependency
npm install -D fa-svelte
Usage
Basic usage
Using font awesome solid Icons, first install them using npm
npm install @fortawesome/free-solid-svg-icons
<Icon icon={icon}>
</Icon>
<script>
import Icon from 'fa-svelte'
import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle'
let icon = faCircle;
</script>Classes
<div>
<Icon class="myClass1 myClass2" icon={faCircle}>
</Icon>
</div>
<script>
import Icon from 'fa-svelte'
import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle'
let icon = faCircle;
</script>
<style>
div :global(.myClass1) {
color: red;
}
div :global(.myClass2) {
font-size: 14px;
}
</style>Configuring webpack
If you're using webpack with svelte-loader,
make sure that you add "svelte" to
resolve.mainFields in
your webpack config. This ensures that webpack imports the uncompiled component (src/Icon.svelte)
rather than the compiled version (index.js) — this is more efficient and will also resolve component
crash in runtime.
For a working web pack example, look at examples/webpack
Credits
This component is based on the template provided by sveltejs