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.

svelte-fa

Tiny FontAwesome component for Svelte

4.0.3

403

MIT

Svelte

463.00 B

1,869,137 3.7

Installations

npm install svelte-fa

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.10.0

NPM Version

8.6.0 Score

92.9

Supply Chain

98.4

Quality

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

5

Total

299

Closed

223

Merged

71

Issues

Open

5

Total

63

Closed

58

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 13 contributors

Languages

Svelte

TypeScript

JavaScript

HTML

SCSS

Svelte (51.58%)

TypeScript (29.47%)

JavaScript (18.39%)

HTML (0.45%)

SCSS (0.1%)

Developer

Cweili

Download Statistics

Total Downloads

1,869,137

Last Day

2,806

Last Week

13,273

Last Month

59,441

Last Year

714,741

GitHub Statistics

403 Stars

270 Commits

26 Forks

7 Watching

7 Branches

13 Contributors

Bundle Size

1.56 kB

Minified

463.00 B

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

4.0.3

Package Id

svelte-fa@4.0.3

Unpacked Size

24.00 kB

Size

6.39 kB

File Count

NPM Version

8.6.0

Node Version

20.10.0

Publised On

24 Sept 2024

Total Downloads

Cumulative downloads

Total Downloads

1,869,137

Last day

-12.7%

2,806

Compared to previous day

Last week

-20.3%

13,273

Compared to previous week

Last month

-2.3%

59,441

Compared to previous month

Last year

38.4%

714,741

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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

Binary-Artifacts

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

10

Dangerous-Workflow

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

10

License

Determines if the project has defined a license.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

3

Code-Review

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

0

Maintained

Determines if the project is "actively maintained".

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

3.7

/10

Last Scanned on 2025-01-27

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

svelte-fa

Installations

Developer Guide

Yes

ESM

20.10.0

8.6.0

Score

Pull Requests

5

299

223

71

Issues

5

63

58

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

1.56 kB

463.00 B

Maintainers

Package Meta Information

Total Downloads

1,869,137

Daily Downloads

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

3

0

0

0

0

0

0

0

0

3.7

/10

`Fa` Properties

`FaLayers` Properties

`FaLayersText` Properties