msanguineti / svelte-fa-ts

Tiny FontAwesome 5 component for Svelte with TypeScript types.

svelte-fa-ts

Tiny FontAwesome 5 component for Svelte with TypeScript types.

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

svelte-fa-ts Vs. svelte-fa

This library is derived from svelte-fa and can be used as a drop-in replacement for it. I did try to fix the original library but it was more work than to actually start anew (old rollupjs plugins, old deps, babel...)

So, I moved the code to TypeScript, dropped everything else (all the build tools), wrote a .d.ts file and created this package.

Now the library works flawlessly when using <script lang="ts">.

I am, of course, in debt to 👏 @Cweili 👏 and its work on the original library. 🎉 🎉 🎉

Installation

npm install svelte-fa-ts

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

npm install svelte-fa-ts -D

Usage

<!-- <script lang="ts"> if using TypeScript -->
<script>
  import Fa from 'svelte-fa-ts'
  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

Element properties

<Fa id="css_id" class="css_class" style="{color: #000;}" />

Duotone Icons

a font-awesome subscription is needed to download the pro version of the icons!

<script>
  import Fa from 'svelte-fa-ts'
  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-ts'
  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} />