Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Installation not working #75

Closed
boriscy opened this issue Feb 9, 2021 · 9 comments
Closed

Installation not working #75

boriscy opened this issue Feb 9, 2021 · 9 comments
Labels
question Further information is requested

Comments

@boriscy
Copy link

boriscy commented Feb 9, 2021

it doesn't work if I install as a package and use as you mention in your documentation, I copied the source of Fa.svelte file and just imported and used as you suggest in your documentation and it works. The version I used when I did this test was 2.2.0

@Cweili
Copy link
Owner

Cweili commented Mar 19, 2021

Could you please provide a link to minimal reproduction such as CodeSandbox or a GitHub repo.

@rubenhensen
Copy link

The installation misses the step where you install the icons. Try running npm i --save @fortawesome/free-solid-svg-icons to install the icons svelte-fa uses.

@boriscy
Copy link
Author

boriscy commented Mar 30, 2021

The installation misses the step where you install the icons. Try running npm i --save @fortawesome/free-solid-svg-icons to install the icons svelte-fa uses.

Done that

@boriscy
Copy link
Author

boriscy commented Mar 30, 2021

Check this example
https://codesandbox.io/s/practical-chaplygin-igml0?file=/App.svelte

In my code I do this, I have aliased node_modules dir "@node_modules": path.join(__dirname, "..", "..", "node_modules"),

import Fa from "@node_modules/svelte-fa/src/fa.svelte"
import { faEdit, faTrash } from "@fortawesome/free-solid-svg-icons"

@Cweili
Copy link
Owner

Cweili commented Mar 30, 2021

Import the component explicitly as below fix the example.

import Fa from "svelte-fa/src/fa.svelte"

But I still need to figure out why.

@Cweili Cweili added the question Further information is requested label Jun 24, 2021
@jrmoynihan
Copy link

jrmoynihan commented Mar 13, 2022

@Cweili You may also want to include in the docs that SvelteKit/Vite may require you to import from the module-friendly export of the font awesome package when you build the site:

import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons/index.es'

@croganm
Copy link

croganm commented Apr 3, 2022

@jrmoynihan You are an absolute saint. I've been trying to figure out what's been going on for the past 15 minutes.

@tipsypastels
Copy link

+1 to mention the index.es thing in the docs if possible :) just stumped me for a bit

when using typescript i found i also needed to add type definitions that redirect to the non-index.es export

// app.d.ts

declare module '@fortawesome/pro-solid-svg-icons/index.es' {
  export * from '@fortawesome/pro-solid-svg-icons';
}

not sure if that's the canonical way to do that but it works

@Cweili
Copy link
Owner

Cweili commented Jun 14, 2022

Added above to the docs.

@jrmoynihan @tipsypastels Thanks very much.

@Cweili Cweili closed this as completed Jan 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

6 participants