How to use Font Awesome 5 with Svelte/Sappe

A

3

8

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?

Arrowood answered 30/5, 2020 at 3:36 Comment(3)

Are you sure that your import is correct? Can you try without the curly braces? Please check this REPL: svelte.dev/repl/9905305c60bc46d99b6c52f1736eaba8?version=3.23.0 – Cabbage 30/5, 2020 at 13:8

With straight Svelte this works. With the server-side rendering of Sapper, however, it does not work. – Arrowood 30/5, 2020 at 19:7

any fixes? same issue... – Multilingual 21/12, 2020 at 0:43

E

8

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.

I like to install it via npm to maintain its version together with all other depencies: npm install --save @fortawesome/fontawesome-free
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>

Use FontAwesome icons in your Svelte components, e.g. <i class="fa-regular fa-lightbulb">

Exarch answered 17/1, 2023 at 17:17 Comment(2)

Note you also need the js. I choose to import both in main.js: import '@fortawesome/fontawesome-free/css/all.css'; import '@fortawesome/fontawesome-free/js/all.js'; – Hague 23/3, 2023 at 8:26

Should it work also after npm run build? Because in my case it does not – Illassorted 20/8, 2023 at 13:56

I

12

After spending 5 hours trying to figure it out, finally here's the simplest way to use Fontawesome icons in Sveltekit (also works in production environment):

Install the fontawesome package

npm install @fortawesome/fontawesome-free

Import the css file containing all icons in the component or page where you need it. (Can also be imported in +layout.ts to apply to multiple pages)
```
import '@fortawesome/fontawesome-free/css/all.min.css'
```
You can now use your icons in the simple classical way:
```
<i class="fa-regular fa-lightbulb">
```

I hope this helps!

Illassorted answered 20/8, 2023 at 15:28 Comment(1)

Thankfully found this before my project was overwhelmed with weird packages or strange methods. +1 friend. – Neoplasm 30/8 at 21:24

E

8

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.

I like to install it via npm to maintain its version together with all other depencies: npm install --save @fortawesome/fontawesome-free
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>

Use FontAwesome icons in your Svelte components, e.g. <i class="fa-regular fa-lightbulb">

Exarch answered 17/1, 2023 at 17:17 Comment(2)

Note you also need the js. I choose to import both in main.js: import '@fortawesome/fontawesome-free/css/all.css'; import '@fortawesome/fontawesome-free/js/all.js'; – Hague 23/3, 2023 at 8:26

Should it work also after npm run build? Because in my case it does not – Illassorted 20/8, 2023 at 13:56

S

0

For svelte-awesome, the import should look as follows in Sapper:

  import Icon from 'svelte-awesome/components/Icon';

Sams answered 10/8, 2020 at 0:50 Comment(1)

The OP isn't intending to rely on third party packages – Pare 14/4, 2023 at 19:36

Recommended topics

Hot tags