Hello, I don't know if this is the right place to post it; of course, let me know if this is not your problem. Jest is complaining when I'm trying to test a Svelte component which includes an Icon through fa-svelte. Relevant parts are:

This would be the simplified component, let's call it Example.svelte

<script>
    import Icon from 'fa-svelte';
    import { faPlusCircle } from '@fortawesome/free-solid-svg-icons/faPlusCircle.js';
    import { faMinusCircle } from '@fortawesome/free-solid-svg-icons/faMinusCircle.js';

    export let expanded = false;
</script>

<div class="a-header">
    <Icon
        class="a-header-icon"
        icon={expanded ? faMinusCircle : faPlusCircle}
    ></Icon>
</div>

Then my test Example.test.js is something like:

import { render } from '@testing-library/svelte';
import Example from '../src/Example.svelte';

describe('example', () => {
    test('renders', () => {
        render(Example);
    });
});

This results in aforementioned error:

$ npm run test

> jest

 FAIL  resources/src/tests/Example.test.js
  ● example › renders

    TypeError: Icon is not a constructor

      13 |     ></Icon>
      14 | </div>
    > 15 | 
         | ^

      at create_fragment (resources/src/Example.svelte:15:9)
      at init (node_modules/svelte/internal/index.js:1465:37)
      at new Example (resources/src/Example.svelte:104:3)
      at render (node_modules/@testing-library/svelte/dist/pure.js:81:21)
      at Object.<anonymous> (resources/src/tests/Example.test.js:8:9)

Just in case, this is my Jest configuration:

module.exports = {
    transform: {
      '^.+\\.svelte$': 'svelte-jester',
      '^.+\\.js$': 'babel-jest',
    },
    moduleFileExtensions: ['js', 'svelte'],
    setupFilesAfterEnv: ['./resources/src/tests/setup-env.js']
}

Any insights as to what's going on? Thanks very much in advanced.

EDIT: I'm using "fa-svelte": "^3.1.0"

Hi @alphapeter,

Thanks for this library, it's quite handy. I understand that you don't want to support all features from Font Awesome icon sets, but have you considered supporting animated icons?

I might have missed something in the documentation but it looks like the only way to import multiple icons is with multiple import statements.

import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
import { faHome } from '@fortawesome/free-solid-svg-icons/faHome';

Is this really the case and are there any plans to make a single import statement in the near future for this component?

I wasn't sure how to best thank you for putting this repo together, save my team and I at least a day! Thank you!

Just FYI to anyone looking, and also perhaps a readme 'bug', @alphapeter.

Hey,

Im trying to create a project with fa-svelte that is using Tailwind, for example, i wanted to set dimensions using w-10 h-10 classes, but it looks like selector from the default is more specific than tailwind declaration.

Is there wany way of either:

• making it less specific so that tailwind will override it,
• not include dimensions part when someone defined any css classes (might not be the most intuitive thing in the world)
• remove default dimensions altogether when someone sets flag to "skipSizing" or something

Thank you very much :)

Currently, the only option to change the size is to wrap the component with an element and set the font-size of it, for example:

<style>
  .icon {
    font-size: 30px
  }
</style>
<i class="icon">
  <Icon icon={faGasPump} />
</i>

I suggest to allow to pass the size in a prop. Maybe something like this: https://stackoverflow.com/a/57183208/863110

I'd like to have an animated spinner like:

<i class="fas fa-spinner fa-spin"></i>

Is it possible?

The example that you have in your Readme file does not work for me. It looks like even the path you reference is invalid.

import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle'
Doesnt match the Node_modules directory structure for your npm module. Can you please help to resolve?

thanks,

Svelte material requires
import Icon from "@smui/textfield/icon/index";

FA should use another name to avoid pain...

[!] (svelte plugin) ParseError: The ref directive is no longer supported — use bind:this={icon} instead

Hi,

Thank you for this helpful component.

I am running into this error using sapper webpack:

/Users/dephiros/projects/lyanvoyages/node_modules/fa-svelte/index.js:261
export default Icon;
^^^^^^
SyntaxError: Unexpected token export
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

I checked and svelte is already in resolve.mainFields in webpack config so not sure what the problem is.

Any help is appreciated!

If I use the new fontawesome duotone style, only one part on the icon shows.
For example, https://fontawesome.com/icons/money-check?style=duotone
only the part with less opacity will show.

Not that there's any real utility in it for this module, but it would prevent Svelte's language server (in default configuration) from warning about it:

Could not find a declaration file for module 'fa-svelte'. '/[...]/node_modules/fa-svelte/index.js' implicitly has an 'any' type. Try npm i --save-dev @types/fa-svelte if it exists or add a new declaration (.d.ts) file containing declare module 'fa-svelte';

When building using webpack, html files in node_modules are ignored by default when using babel transipler. Thus it will not work when using internet explorer.

The solution is to rewrite the component using ES5

Is it possible to dynamically import only needed icons? For example, if I don't know which exactly icons will be used in component, and the icons names came as a strings from the server, should I just import all icons like this:

import * as icons from '@fortawesome/free-solid-svg-icons/';

And then use as:

<Icon icon={icons[key]}>

?

But i'm afraid in this case I will add to the bundle all FA icons. Is there any solution to do it properly?

Thaks

Fix documentation to not advice using :global without a parent selector.