Fa Svelte screenshot

Fa Svelte

Author Avatar Theme by Alphapeter
Updated: 14 Mar 2020
70 Stars

Font Awesome 5 for svelte.js

Overview:

fa-svelteFontawesome is a lightweight Svelte component for Font Awesome SVG icons. It has a small footprint and only bundles the icons that are actually used, resulting in a minimalistic and efficient library. It does not require additional CSS files and only uses SVG icons, without any font dependencies. This library is designed for situations where size and speed are important considerations.

Features:

  • Small footprint: Only bundles the icons that are used, reducing the overall size of the library.
  • No dependencies: Does not require any additional libraries or dependencies to work.
  • Only SVG icons: Uses SVG icons from Font Awesome, without relying on fonts.
  • Easy installation: Can be installed as a development dependency using npm.
  • Compatibility with webpack: Provides instructions on configuring webpack to ensure optimal performance.

Installation:

To install fa-svelteFontawesome, first make sure you have Svelte v3.x installed. If you are using Svelte v2, you will need to use fa-svelte v1.x.x instead.

Next, run the following command to install fa-svelteFontawesome as a development dependency:

npm install -D fa-svelte

For basic usage, you will also need to install the Font Awesome solid icons package using npm:

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

If you are using webpack with the svelte-loader, make sure to add “svelte” to the resolve.mainFields option in your webpack config. This will ensure that webpack imports the uncompiled component (src/Icon.svelte) rather than the compiled version (index.js), resulting in better performance and avoiding potential runtime crashes. For a working webpack example, you can refer to the provided examples in the examples/webpack directory.

Summary:

fa-svelteFontawesome is a lightweight and efficient Svelte component for using Font Awesome SVG icons. It provides a minimalistic approach, only bundling the icons that are used and not requiring any additional dependencies or CSS files. The installation process is simple and it also offers compatibility with webpack for optimal performance.