svelte-fa

Tiny [FontAwesome][fontawesome] component for [Svelte][svelte].

Key features:

• Supports FontAwesome versions 5 and 6
• Uses FontAwesome SVG icons
• Tree-shakable (only imports used icons)
• No CSS file required
• Supports FontAwesome layering
• Supports FontAwesome duotone icons

[Documents and examples][doc]

Usage

<script>
import Fa from 'svelte-fa'
import { faFlag } from '@fortawesome/free-solid-svg-icons'
import { faGithub } from '@fortawesome/free-brands-svg-icons';
</script>

<Fa icon={faFlag} />
<Fa icon={faGithub} />

Core Features

Fa Component Properties

• icon: FontAwesome icon from official packages
• Supports sizing (xs, sm, lg, 2x, etc.)
• Color customization
• Transformations (scale, translate, rotate, flip)
• Animation effects (spin, pulse)

Layering Support

Includes FaLayers and FaLayersText components for creating layered icon compositions.

Duotone Icons Support

• Customizable primary/secondary colors
• Adjustable opacity levels
• Theme support for consistent styling

Framework Support

Primarily designed for Svelte applications, with specific notes for:

• Sapper
• SvelteKit/Vite

[fontawesome]: https://fontawesome.com/ [svelte]: https://svelte.dev/ [doc]: https://cweili.github.io/svelte-fa/