/sveltejs-fontawesome

Font Awesome 5 Svelte component https://fontawesome.com

Primary LanguageHTMLMIT LicenseMIT

sveltejs-fontawesome

  • Sapper support
  • Duotone support

Installation

For Svelte

npm i sveltejs-fontawesome

For Sapper

npm i -D sveltejs-fontawesome

Requirements

npm i @fortawesome/fontawesome-svg-core

Usage

Install the icons your want

Free icons

npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/free-brands-svg-icons
npm i @fortawesome/free-regular-svg-icons

Pro icons

More info here

npm i @fortawesome/pro-solid-svg-icons
npm i @fortawesome/pro-regular-svg-icons
npm i @fortawesome/pro-light-svg-icons
npm i @fortawesome/pro-duotone-svg-icons

Example

<script>
  import Fa from "sveltejs-fontawesome"
  import { faCircle } from '@fortawesome/free-solid-svg-icons'
</script>

<Fa
  icon={faCircle}
  size="sm"
  color="#000000">
</Fa>

Attributes

Attribute Usage
icon required The icon you imported from font awesome
color Can be anything that the fill svg property supports
secondaryColor If you are using Duotone it's the secondary color
secondaryOpacity If you are using Duotone it's the opacity of the secondary color
size Can be a string from this list (without the fa-) or a standard css size in any units.
flip Can be "h" for horizontal flip, "v" for vertical flip, or "hv" for both.
rotate In degrees
style Custom css style on the <svg>