https://github.com/alphapeter/fa-svelte

Font Awesome 5 for svelte.js
https://github.com/alphapeter/fa-svelte

font-awesome fontawesome fontawesome5 javascript svelte svelte-components sveltejs

Last synced: 12 days ago
JSON representation

Font Awesome 5 for svelte.js

• Host: GitHub
• URL: https://github.com/alphapeter/fa-svelte
• Owner: alphapeter
• License: mit
• Created: 2018-08-01T14:48:29.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T00:43:21.000Z (almost 2 years ago)
• Last Synced: 2024-10-15T19:21:56.145Z (28 days ago)
• Topics: font-awesome, fontawesome, fontawesome5, javascript, svelte, svelte-components, sveltejs
• Language: JavaScript
• Size: 2.54 MB
• Stars: 71
• Watchers: 2
• Forks: 3
• Open Issues: 35
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fa-svelte

[Fontawesome 5](https://fontawesome.com/) for [svelte v3.x](https://svelte.dev/) 

(For svelte v2, use fa-svelte v1.x.x)

## About

A simple minimalistic lightweight svelte component for Font Awesome SVG icons.

* Small footprint 

* Only used icons will be bundled

* No dependencies

* Only SVG (no fonts)

* Does not require additional CSS files 

This library is currently not intended to be fully featured, it is the option when size and speed is of importance.

## Installation 

Install as a development dependency

`npm install -D fa-svelte`

## Usage

### Basic usage

Using font awesome solid Icons, first install them using npm  

`npm install @fortawesome/free-solid-svg-icons`

```html

import Icon from 'fa-svelte'

import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle'

let icon = faCircle;

```

### Classes

```html



  

  



import Icon from 'fa-svelte'

import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle'

let icon = faCircle;

div :global(.myClass1) {

    color: red;

}

div :global(.myClass2) {

    font-size: 14px;

}

```

## Configuring webpack

If you're using webpack with [svelte-loader](https://github.com/sveltejs/svelte-loader), 

make sure that you add `"svelte"` to 

[`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in 

your webpack config. This ensures that webpack imports the uncompiled component (`src/Icon.svelte`) 

rather than the compiled version (`index.js`) — this is more efficient and will also resolve component 

crash in runtime.  

For a working web pack example, look at [examples/webpack](https://github.com/alphapeter/fa-svelte/tree/master/examples/webpack)  

## Credits

This component is based on the [template](https://github.com/sveltejs/component-template) 

provided by [sveltejs](https://github.com/sveltejs)