Gathering detailed insights and metrics for svelte-fa
Gathering detailed insights and metrics for svelte-fa
Gathering detailed insights and metrics for svelte-fa
Gathering detailed insights and metrics for svelte-fa
npm install svelte-fa
Typescript
Module System
Node Version
NPM Version
97.9
Supply Chain
98.4
Quality
77.9
Maintenance
100
Vulnerability
100
License
Svelte (51.57%)
TypeScript (29.58%)
JavaScript (18.3%)
HTML (0.45%)
SCSS (0.1%)
Total Downloads
2,193,314
Last Day
1,511
Last Week
20,896
Last Month
90,827
Last Year
818,563
MIT License
404 Stars
277 Commits
27 Forks
6 Watchers
13 Branches
13 Contributors
Updated on Jul 08, 2025
Minified
Minified + Gzipped
Latest Version
4.0.4
Package Id
svelte-fa@4.0.4
Unpacked Size
24.12 kB
Size
6.46 kB
File Count
15
NPM Version
10.8.1
Node Version
22.11.0
Published on
Apr 22, 2025
Cumulative downloads
Total Downloads
Last Day
-11.7%
1,511
Compared to previous day
Last Week
-9.6%
20,896
Compared to previous week
Last Month
12.1%
90,827
Compared to previous month
Last Year
41.6%
818,563
Compared to previous year
1
25
Tiny FontAwesome component for Svelte.
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
You may need to install the component as a devDependency:
1npm install svelte-fa -D
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}
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
Properties1<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 iconsclass
: 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 widthpull
: 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 iconspulse
: boolean
pulse spin icons1import 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
Propertiessize
: string
values xs
, sm
, lg
or 2x
, 3x
, 4x
, ..., ${number}x
pull
: string
values left
, right
FaLayersText
Propertiessize
: 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
...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/>
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/>
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.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
Reason
5 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 4
Reason
Found 7/20 approved changesets -- score normalized to 3
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
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