Skip to content

Cweili/svelte-fa

Repository files navigation

svelte-fa

npm bundle size npm downloads license

github build coverage

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

npm install svelte-fa

Install FontAwesome icons via official packages, for example:

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

Icons gallery: FontAwesome icons

Work with Sapper

You may need to install the component as a devDependency:

npm install svelte-fa -D

Work with SvelteKit/Vite

You may need to import the component explicitly as below:

import Fa from 'svelte-fa/dist/fa.svelte'
import { 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:

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

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

Fa Properties

<Fa
  icon={faFlag}
  class="bg-gold"
  size="2x"
  color="#ff0000"
  fw
  pull="left"
  scale={1.2}
  translateX={0.2}
  translateY={0.2}
  rotate={90}
  flip="horizontal"
  spin
  pulse
/>
  • icon: icon from FontAwesome packages, for example: @fortawesome/free-solid-svg-icons, icons gallery: FontAwesome icons
  • class: string values ${your preffered any css class}
  • 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

import Fa, {
  FaLayers,
  FaLayersText,
} from 'svelte-fa';
<FaLayers
  size="4x"
  pull="left"
>
  <Fa icon={faCertificate} />
  <FaLayersText
    scale={0.25}
    rotate={-30}
    color="white"
    style="font-weight: 900"
  >
    NEW
  </FaLayersText>
</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

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

Contributors

Cweili
Cweili
marekdedic
Marek Dědič
gtm-nayan
Gtmnayan
ItzaMi
Rui Sousa
theodorejb
Theodore Brown
msanguineti
Mirco Sanguineti
RealA10N
Alon Krymgand
connercsbn
Conner
prokawsar
Kawsar Ahmed
mvolkmann
Mark Volkmann
ModischFabrications
Robin Modisch
RemiKalbe
Rémi Kalbe
hawk93
Null