svelte-fa

Tiny FontAwesome component for Svelte.

• FontAwesome version 5 and 6
• FontAwesome svg icons
• Tree-shakable, only import used icons
• No CSS file required
• FontAwesome layering
• FontAwesome duotone icons

Documents and examples.

Installation

1npm install svelte-fa

Install FontAwesome icons via official packages, for example:

1npm install @fortawesome/free-solid-svg-icons
2npm install @fortawesome/free-brands-svg-icons

Icons gallery: FontAwesome icons

Work with Sapper

You may need to install the component as a devDependency:

1npm install svelte-fa -D

Work with SvelteKit/Vite

You may need to import the component explicitly as below:

1import Fa from 'svelte-fa/src/fa.svelte'
2import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons/index.es'

When using typescript with SvelteKit/Vite, you may also needed to add type definitions that redirect to the non-index.es export:

1// app.d.ts
2declare module '@fortawesome/pro-solid-svg-icons/index.es' {
3  export * from '@fortawesome/pro-solid-svg-icons';
4}

Usage

1<script>
2import Fa from 'svelte-fa'
3import { faFlag } from '@fortawesome/free-solid-svg-icons'
4import { faGithub } from '@fortawesome/free-brands-svg-icons';
5</script>
6
7<Fa icon={faFlag} />
8<Fa icon={faGithub} />

Fa Properties

1<Fa
2  icon={faFlag}
3  size="2x"
4  color="#ff0000"
5  fw
6  pull="left"
7  scale={1.2}
8  translateX={0.2}
9  translateY={0.2}
10  rotate={90}
11  flip="horizontal"
12  spin
13  pulse
14/>

• icon: icon from FontAwesome packages, for example: @fortawesome/free-solid-svg-icons, icons gallery: FontAwesome icons
• size: string values xs, sm, lg or 2x, 3x, 4x, ..., ${number}x
• color: string icon color, default currentColor
• fw: boolean fixed width
• pull: string values left, right
• scale: number | string transform scale, unit is em, default 1
• translateX: number | string transform position X, unit is em, default 0
• translateY: number | string transform position Y, unit is em, default 0
• flip: string values horizontal, vertical, both
• rotate: number | string values 90, 180, 270, 30, -30 ...
• spin: boolean spin icons
• pulse: boolean pulse spin icons

Layering & Text

1import Fa, {
2  FaLayers,
3  FaLayersText,
4} from 'svelte-fa';

1<FaLayers
2  size="4x"
3  pull="left"
4>
5  <Fa icon={faCertificate} />
6  <FaLayersText
7    scale={0.25}
8    rotate={-30}
9    color="white"
10    style="font-weight: 900"
11  >
12    NEW
13  </FaLayersText>
14</FaLayers>

FaLayers Properties

• size: string values xs, sm, lg or 2x, 3x, 4x, ..., ${number}x
• pull: string values left, right

FaLayersText Properties

• size: string values xs, sm, lg or 2x, 3x, 4x, ..., ${number}x
• color: string icon color, default currentColor
• scale: number | string transform scale, unit is em, default 1
• translateX: number | string transform position X, unit is em, default 0
• translateY: number | string transform position Y, unit is em, default 0
• flip: string values horizontal, vertical, both
• rotate: number | string values 90, 180, 270, 30, -30 ...

Duotone Icons

1<script>
2import Fa from 'svelte-fa'
3import { faFlag } from '@fortawesome/pro-duotone-svg-icons'
4</script>
5
6<Fa
7  icon={faFlag}
8  primaryColor="red"
9  secondaryColor="#000000"
10  primaryOpacity={0.8}
11  secondaryOpacity={0.6}
12  swapOpacity
13/>

Duotone Icons Theme

1<script>
2import Fa from 'svelte-fa'
3import { faFlag } from '@fortawesome/pro-duotone-svg-icons'
4
5const theme = {
6  primaryColor: 'red',
7  secondaryColor: '#000000',
8  primaryOpacity: 0.8,
9  secondaryOpacity: 0.6,
10}
11</script>
12
13<Fa
14  icon={faFlag}
15  {...theme}
16/>