/svelte-fa

Tiny FontAwesome 5 component for Svelte

Primary LanguageJavaScriptMIT LicenseMIT

svelte-fa

npm bundle size npm downloads license

github build coverage

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 ...
  • 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}/>