Using this with Sapper and SSR

[adamkiss]

In #221 you mentioned you solved using this with Sapper and Svelte v3 - could you tell us or add to readme how did you solve it?

I'm calling the Icon like this:

import Icon from 'svelte-awesome'
import {faBadge} from '@fortawesome/pro-duotone-svg-icons'

Using it like this:

<Icon data={faBadge} scale=2 />

And while the icon loads from client side (navigation and/or rehydratation), initial HTML has the 500 error text instead of the icon and the dev/build server returns code 500 upon HTML loading, the 500 text flashes while the page is rehydrated.

<Icon> 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

Thank you.

[adamkiss]

For some reason, including only the Icon.svelte component works in SSR as well.

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

[adamkiss]

Wait, no, it doesn't work — the HTML version of page has only empty tag — it just doesn't return 500 anymore.

[RobBrazier]

Huh, I did exactly what you did initially, albeit not with the font-awesome v5 icons.
Are you using the latest version?

Thanks for reporting this - I'll have a look into this and try and set up a sample sapper project. I didn't do anything special though 😕

[adamkiss]

@RobBrazier Let me create a demo if I can — I cancelled moving to Sapper for now, but I can help with this.

[adamkiss]

So:

1. install with degit (from the Sapper site)
2. npm i -S svelte-awesome
3. edited .npmrc with FA PRO token
4. npm i -S @fortawesome/pro-(duotone|light)-svg-icons
5. add Icon to index.svelte
6. Profit?

• demo repository
• here's how's it called
• here's 500 export

[RobBrazier]

that's great thanks!
I've cloned your repo and have been able to replicate the issue (with the free icons though, I don't have the pro subscription). no idea how I didn't see this on my test, it was basically just the starter repository you degit-ed from.
...
after a few minutes of tinkering, I managed to replicate the error on my app, I think it was me being an idiot... I added svelte-awesome as a dev dependency... (this seems like it might cause a separate issue / weirdness though, not an 'error' though - the svg doesn't seem to load on the inital page load, however not sure if this is due to the same issue)

[adamkiss]

I know the empty svg tag, but errorless compile is also a result of including the Icon like this:

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

Unfortunately I cant help you more here: my journey with Sapper is on hold for now (not a good fit)

[marcebdev]

Currently working for me using Sapper using svelte-awesome
Still have 500 errors while loading/reloading (in dev) but not sure if that's something solvable on your end

[andykais]

This library still has merit if you want to avoid writing things manually, but the following works for me. The @fortawesome/free-brands-svg-icons library essentially just stores path data for each icon.

<script>
import { faNpm } from '@fortawesome/free-brands-svg-icons'
let data = faNpm
</script>

<svg
  version="1.1"
  class="icon"
  role="presentation"
  fill="currentColor"
  viewBox={`0 0 ${data.icon[0]} ${data.icon[1]}`}>
  <path key="path-0" d={data.icon[4]} />
</svg>

[RobBrazier]

Hmm... I'm still seeing the same issues, Reopening as it needs more investigation

[RobBrazier]

okay, it seems that for sapper, you need to do

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

rather than the simpler

import Icon from 'svelte-awesome'

I'll add this to the README