Skip to content

Cweili/svelte-fa

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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