npmpackage.info

Gathering detailed insights and metrics for svelte-fa

Other packages similar to svelte-fa

fa-svelte

3.1.0

Fontawesome 5 Sveltejs 3 component

@jrmoynihan/svelte-fa

4.0.2

Tiny FontAwesome component for Svelte

lukger-fa-svelte

0.0.1

Fontawesome library for Svelte

@jeanvt/svelte-tw-fa

0.0.7

Custom components using svelte, tailwind and fontawesome.

Gathering detailed insights and metrics for svelte-fa

svelte-fa - 4.0.4 | npmpackage.info

svelte-fa

Tiny FontAwesome component for Svelte

4.0.4

403

MIT

Svelte

24.12 kB

4.1

Installations

npm install svelte-fa

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

22.11.0

NPM Version

10.8.1 Pull Requests

Open

10

Total

339

Closed

253

Merged

76

Issues

Open

4

Total

63

Closed

59

Releases

Unable to fetch releases

Languages

Svelte

TypeScript

JavaScript

HTML

SCSS

Svelte (51.57%)

TypeScript (29.58%)

JavaScript (18.3%)

HTML (0.45%)

SCSS (0.1%)

Developer

Cweili

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

403 Stars

277 Commits

27 Forks

6 Watchers

13 Branches

13 Contributors

Updated on Jul 08, 2025

Maintainers

View All 13 Contributors

Package Meta Information

Latest Version

4.0.4

Package Id

svelte-fa@4.0.4

Unpacked Size

24.12 kB

Size

6.46 kB

File Count

NPM Version

10.8.1

Node Version

22.11.0

Published on

Apr 22, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

svelte-fa

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

1npm install svelte-fa

Install FontAwesome icons via official packages, for example:

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

Icons gallery: FontAwesome icons

Work with Sapper

You may need to install the component as a devDependency:

1npm install svelte-fa -D

Work with SvelteKit/Vite

You may need to import the component explicitly as below:

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

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

Usage

1<script>
2import Fa from 'svelte-fa'
3import { faFlag } from '@fortawesome/free-solid-svg-icons'
4import { faGithub } from '@fortawesome/free-brands-svg-icons';
5</script>
6
7<Fa icon={faFlag} />
8<Fa icon={faGithub} />

`Fa` Properties

1<Fa
2  icon={faFlag}
3  class="bg-gold"
4  size="2x"
5  color="#ff0000"
6  fw
7  pull="left"
8  scale={1.2}
9  translateX={0.2}
10  translateY={0.2}
11  rotate={90}
12  flip="horizontal"
13  spin
14  pulse
15/>

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

1import Fa, {
2  FaLayers,
3  FaLayersText,
4} from 'svelte-fa';

1<FaLayers
2  size="4x"
3  pull="left"
4>
5  <Fa icon={faCertificate} />
6  <FaLayersText
7    scale={0.25}
8    rotate={-30}
9    color="white"
10    style="font-weight: 900"
11  >
12    NEW
13  </FaLayersText>
14</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

1<script>
2import Fa from 'svelte-fa'
3import { faFlag } from '@fortawesome/pro-duotone-svg-icons'
4</script>
5
6<Fa
7  icon={faFlag}
8  primaryColor="red"
9  secondaryColor="#000000"
10  primaryOpacity={0.8}
11  secondaryOpacity={0.6}
12  swapOpacity
13/>

Duotone Icons Theme

1<script>
2import Fa from 'svelte-fa'
3import { faFlag } from '@fortawesome/pro-duotone-svg-icons'
4
5const theme = {
6  primaryColor: 'red',
7  secondaryColor: '#000000',
8  primaryOpacity: 0.8,
9  secondaryOpacity: 0.6,
10}
11</script>
12
13<Fa
14  icon={faFlag}
15  {...theme}
16/>

Contributors

_Cweili	_{Marek Dědič}	_Gtmnayan	_{Rui Sousa}	_{Theodore Brown}	_{Mirco Sanguineti}
_{Alon Krymgand}	_Conner	_{Kawsar Ahmed}	_{Mark Volkmann}	_{Robin Modisch}	_{Rémi Kalbe}
_Null

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

4

Maintained

Determines if the project is "actively maintained".

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/Cweili/svelte-fa/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/Cweili/svelte-fa/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/Cweili/svelte-fa/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/contributor.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/Cweili/svelte-fa/contributor.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/Cweili/svelte-fa/deploy.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/Cweili/svelte-fa/deploy.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/Cweili/svelte-fa/deploy.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/Cweili/svelte-fa/deploy.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/Cweili/svelte-fa/deploy.yml/master?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:20
Warn: npmCommand not pinned by hash: .github/workflows/deploy.yml:41
Info: 0 out of 7 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 2 third-party GitHubAction dependencies pinned
Info: 0 out of 2 npmCommand dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

4.1

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to svelte-fa

Other packages similar to svelte-fa

svelte-fa

Installations

Developer Guide

Yes

ESM

22.11.0

10.8.1

Pull Requests

10

339

253

76

Issues

4

63

59

Releases

Unable to fetch releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

svelte-fa

Installation

Work with Sapper

Work with SvelteKit/Vite

Usage

Fa Properties

Layering & Text

FaLayers Properties

FaLayersText Properties

Duotone Icons

Duotone Icons Theme

Contributors

10

10

10

10

4

3

0

0

0

0

0

0

0

4.1

/10

`Fa` Properties

`FaLayers` Properties

`FaLayersText` Properties