Package Exports

svelte-fa

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-fa) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

svelte-fa

Tiny FontAwesome 5 component for Svelte.

FontAwesome svg icons
Tree-shakable, only import used icons
No CSS file required
FontAwesome duotone icons

Documents and examples.

Installation

npm install svelte-fa

Notice: For Sapper user, you have to install the component as a devDependency.

npm install svelte-fa -D

Usage

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

<Fa icon={faFlag}/>

Properties

<Fa
  icon={faFlag}
  fw
  flip="horizontal"
  pull="left"
  rotate={90}
  size="2x"
  color="#ff0000"/>

fw: fixed width
flip: string values horizontal, vertical, both
pull: string values left, right
rotate: number or string values 90, 180, 270, 30, -30 ...
size: string values xs, sm, lg or 2x, 3x, 4x, ..., 10x
color: icon color, default currentColor

Duotone Icons

<script>
import Fa from 'svelte-fa'
import { faFlag } from '@fortawesome/pro-duotone-svg-icons'
</script>

<Fa
  icon={faFlag}
  primaryColor="red"
  secondaryColor="#000000"
  primaryOpacity={0.8}
  secondaryOpacity={0.6}
  swapOpacity/>

Duotone Icons Theme

<script>
import Fa from 'svelte-fa'
import { faFlag } from '@fortawesome/pro-duotone-svg-icons'

const theme = {
  primaryColor: 'red',
  secondaryColor: '#000000',
  primaryOpacity: 0.8,
  secondaryOpacity: 0.6,
}
</script>

<Fa
  icon={faFlag}
  {...theme}/>