Search code examples
font-awesomesveltesapper

How to use Font Awesome 5 with Svelte/Sappe

I am writing a Server Side Rendered app with Svelte/Sapper and I am having trouble using Font Awesome fonts.

I am using the following to load the font:

<script>
  import Icon from "svelte-awesome";
  import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
</script>

<Icon data={faTimes} />

The error I am seeing is: " is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules"

Is there a solution to this?

Solution

  • I landed on this page looking for ways to import just the FontAwesome CSS into Svelte without any additional components or dependencies. Turns out that with Svelte this is just as simple as with plain HTML: Get the FontAwesome CSS (e.g. via package manager, CDN, or download) and add it to the HTML <head> section.

    1. I like to install it via npm to maintain its version together with all other depencies: npm install --save @fortawesome/fontawesome-free

    2. After installing, just add the stylesheet (from the @fortawesome directory inside node_modules) to the <head> section of app.html.

    <head>
    ...
    <link href="./../node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    ...
</head>
    1. Use FontAwesome icons in your Svelte components, e.g. <i class="fa-regular fa-lightbulb">