Cweili / svelte-fa

Tiny FontAwesome component for Svelte

Home Page:https://cweili.github.io/svelte-fa/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Installation not working

boriscy opened this issue · comments

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

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

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.

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

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"

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

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

+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

Added above to the docs.

@jrmoynihan @tipsypastels Thanks very much.