First of all thanks for creating and maintaining this library, it is my favorite when it comes to using icons in Svelte.

I do have an minor isue with the type of the flip prop when used in typescript projects.
Currently the type of the component prop flip in fa.svelte is a boolean because of the default value false. This causes type errors in VS Code when using the component with flip set to flip="horizontal"

Current

// fa.svelte
<script>
  export let flip = false;
</script>

Proposed

// fa.svelte
<script lang="ts">
  export let flip : boolean|"horizontal"|"vertical" = false;
</script>

Issue

For some reason, wikipedia-w icon, that is available in the last free FontAwesome package, isn't yet available in svelte-fa.

Right now I have something like

{
        links: [
            ["https://github.com/boehs","github-square fab"],
            ["https://linkedin.com/?","linkedin fab"],
            ["https://500px.com/?","camera fas"]
        ],
}

as a config file, and this works fine because I load the FA font. it is mostly obvious to me how to use the component, except I am unsure of the best method to import what I need (defined in the cfg) automatically from the fa svg package.

In this example I could easily go into where it's needed Footer.svelte and import { camera } ... import { github, linkedin }, but as it's a config file it's unpredictable and the user might need the reddit icon, for instance.

How would I do this?

Since there is no gallery that I can find, how does one know what the faFlag codes are, since they apparently don't correspond to the regulare FA names.

For example, I wanted to add a svelte-fa icon for arrow-right in FA (e.g., here), but there is no corresponding faFlag for that, and the closest thing I could find was 'faArrowCircleRight'. Also, since there's no gallery showing icons to codes, I had to rely on autocomplete and trial and error in the import statement in Svelte.

Am I missing something?

Thanks! And great work on this!

Code:

Output:

Note the 'r'.

I've used the FA Library feature heavily in a React project and was hoping it was supported here too, since it's easier than importing a bunch of icons in every page.

I guess it's either already supported (since it depends on the basic NPM FA packages) and is "missing" from this package's docs, or it might need some small work to get it supported around here?

And REALLY, thanks for creating sanely named components! Having to use <FontAwesome icon="stuff"/> always drove me nuts in React-land (and it seems standard in Vue too, probably in all official packages, and also sad clones), until I gave up and created an <Icon/> component lol (also because they never cared for creating an <FaLayers/> as you also did). Seriously, thanks haha

Currently the size prop is typed as

      | 'xs'
      | 'sm'
      | 'lg'
      | '1x'
      | '2x'
      | '3x'
      | '4x'
      | '5x'
      | '6x'
      | '7x'
      | '8x'
      | '9x'
      | '10x'

However, the implementation of getStyle allows for any number suffixed by an x,
so the type could be changed to keep typescript from complaining,
Using template literal types should work.

When running npm run check, it says that it's missing the icon property:

Error: Type '{ size: "2x"; }' is not assignable to type 'IntrinsicAttributes & { class?: string; id?: string; style?: string; icon: IconDefinition; size?: "xs" | "sm" | "lg" | `${number}x`; color?: string; fw?: boolean; ... 12 more ...; swapOpacity?: boolean; }'.
  Property 'icon' is missing in type '{ size: "2x"; }' but required in type '{ class?: string; id?: string; style?: string; icon: IconDefinition; size?: "xs" | "sm" | "lg" | `${number}x`; color?: string; fw?: boolean; pull?: "left" | "right"; scale?: string | number; ... 10 more ...; swapOpacity?: boolean; }'. (ts)
    >
      <FaLayers size="2x">
        <Fa

But on svelte-fa readme, it looks like that this property isn't required. Also, the application looks like working fine.

Is it a wrong type definition?

Since I'm using svelte-kit, I needed to do this trick:

declare module 'svelte-fa/src/fa.svelte' {
  import Fa from 'svelte-fa/src/index.js';
  export default Fa;
}

declare module 'svelte-fa/src/fa-layers.svelte' {
  import FaLayers from 'svelte-fa/src/index.js';
  export default FaLayers;
}

How to replicate:

yarn add svelte-fa
yarn add @fortawesome/free-brands-svg-icons

Then simply:

<script>
  import Fa from 'svelte-fa/src/fa.svelte'
  import { faGithub } from '@fortawesome/free-brands-svg-icons'
</script>
<footer>
  <div class="foobar">
    <div class="icon-container"><Fa icon={faGithub}/></div>
  </div>

</footer>

then yarn run build && yarn run serve

output:
freeBrandsSvgIcons imported from external module "@fortawesome/free-brands-svg-icons" but never used in "src/Footer.svelte"
@fortawesome/free-brands-svg-icons (guessing 'freeBrandsSvgIcons')

Upon navigating to the website in question I see this in the console:
Uncaught ReferenceError: freeBrandsSvgIcons is not defined

Is there something I'm doing incorrectly?
This happens regardless of using free-brands-svg-icons or free-solid-svg-icons

Hello, is there a plan to support the use of masks?
In the react-fontawesome library there is a property...
An example of use (not mine): https://codepen.io/SylvainDNS/pen/ZEpXEEZ

When using version 2.0.2 with sapper I'm getting 'Fa is not a server side rendering component'

Icons do load with the dynamically imported component, but it's janky, would be really nice to render the SVG with SSR.

When using typescript size gives error "Type 'string' is not assignable to type 'boolean'."

Hello!

Thank you for this project which makes using fontawesome a breeze! While importing and displaying free svg icons work great, I have had no success with FaLayers and FaLayersText as shown in the examples. Here is my code ..

<script lang="ts">
	import Fa from 'svelte-fa';
	import FaLayers from 'svelte-fa';
	import FaLayersText from 'svelte-fa';
	import { faFlag } from '@fortawesome/free-solid-svg-icons/faFlag';
	import { faCalendar } from '@fortawesome/free-solid-svg-icons/faCalendar';
	import { faCertificate } from '@fortawesome/free-solid-svg-icons/faCertificate';
	import { faBookmark } from '@fortawesome/free-solid-svg-icons/faBookmark';
	import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart';
</script>

<div class="px-8 py-4">
	<Fa icon={faFlag} size="2x" color="tomato" />

	<FaLayers size="4x" style="background: mistyrose">
		<Fa icon={faCalendar} />
		<FaLayersText
			scale={0.45}
			translateY={0.06}
			color="white"
			style="font-weight: 900"
			icon={faCalendar}
		>
			27
		</FaLayersText>
	</FaLayers>

	<Fa icon={faCertificate} size="4x" style="background: mistyrose" color="blue" />

	<FaLayers size="4x" style="background: mistyrose">
		<Fa icon={faCertificate} size="2x" color="blue" />
		<FaLayersText scale={0.25} rotate={-30} color="white" style="font-weight: 900">
			NEW
		</FaLayersText>
	</FaLayers>

	<FaLayers size="4x" style="background: mistyrose">
		<Fa icon={faBookmark} />
		<Fa icon={faHeart} scale={0.4} translateY={-0.1} color="tomato" />
	</FaLayers>

	<FaLayers size="4x" pull="left">
		<Fa icon={faCertificate} />
		<FaLayersText scale={0.25} rotate={-30} color="white" style="font-weight: 900">
			NEW
		</FaLayersText>
	</FaLayers>
</div>

Only the <Fa .. /> icons work and none of the <FaLayers .. /> icons with the layers are displayed. I'm only using the free fontawesome 6.2.0 icons

Hi there. Love the library. Using it for all my Svelte projects now. I am requesting a feature, not an issue. FontAwesome allows stacking Icons. Almost like layering but instead of text over icons it is icons over icons.

https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/stacking-icons

I am not sure the process of allowing this in your library but it would be great. I have attempted to implement on my own without success. Here is an example I used:

Any help would be great.

Thank you.

When I run svelte-check I get lots of errors with the message in the subject.
Is this a known issue?
I have these dependencies installed:

    "@fortawesome/fontawesome-common-types": "^0.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",

I think it is confused about the type of values imported from @fortawesome/free-solid-svg-icons.
Are those supposed to have a type of IconDefinition?

It seems that after a recent package upgrade, if your page globally imports the fontawesome-free library (i.e., separate from svelte), the package will replace anything with the "fa" class including svg tags. The result is now all the svgs created by svelte-fa are getting their innards replaced with fontawesome's flashing error icon indicator which alternates between "?" and "!"

Diving into the code, if I remove the "fa" class from the svelte-fa component, everything works fine. Is this class really necessary on the svg tag? It is causing issues for pages that already include the fontawesome library.

First I want to say great work on this library. It's exactly what I've been looking for, and I love the way that you've exposed the ability to create themes that can be used on multiple icons. I've been struggling with the usage of the component though, when I attempt to add it to a custom web component, rather than just having everything working inside of a normal single page application. The error message that I get is TypeError: Illegal constructor

After a lot of trial and error, and unproductive searching online, I came up with a way that this will work being used inside custom web components that might be a good idea to add in your docs or FAQ. Rather than writing in your script import Fa from 'svelte-fa'; it needs to be import Fa from 'svelte-fa/dist/svelte-fa';. Someone who's using this inside of a custom web component needs to reference the compiled js or they're going to run into the Illegal constructor error.

Failing exampe
https://svelte.dev/repl/d150cdddb9ed4337af690070c7d3c855?version=3.46.4

The devDependency eslint-plugin-jest was updated from 22.9.0 to 22.10.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Adding the class "fa-spin" does not seem to do anything. How does one get the icons spinning?

I use Svelte with TypeScript and svelte-check complains:

Hint: Could not find a declaration file for module 'svelte-fa/src/fa.svelte'. '[...]/node_modules/svelte-fa/src/fa.svelte' implicitly has an 'any' type. (ts)

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

It would be great if you would add TypeScript support!

The devDependency eslint was updated from 5.16.0 to 6.2.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I'm getting

/Users/remivillien/Git/RemiKalbe/dwoom-myaccount-frontend/node_modules/svelte-fa/src/fa.svelte:1
<script>
^

SyntaxError: Unexpected token <
    at Module._compile (internal/modules/cjs/loader.js:720:22)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/remivillien/Git/RemiKalbe/dwoom-myaccount-frontend/__sapper__/dev/server/index-f79d722d.js:11:26)
    at Module._compile (internal/modules/cjs/loader.js:777:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
> Server crashed

Using

"sapper": "^0.27.9",
"svelte": "^3.12.1"

The devDependency eslint-plugin-jest was updated from 22.15.0 to 22.15.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Building my SvelteKit project ends with the following error:

SyntaxError: Named export 'faFlag' not found. The requested module '@fortawesome/free-solid-svg-icons' is a CommonJS module, which may not support all module.exports as named exports.

In dev the project works. It seems the problem started since SvelteKit use Vite 3.

Thanks for help.

The devDependency svelte was updated from 3.7.1 to 3.8.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

svelte is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I followed the instructions at https://svelte.dev/blog/svelte-and-typescript to setup a Svelte + TypeScript project, and used this library successfully. But the "svelte validate" step fails with this error:

Error: Cannot find module 'svelte-fa' or its corresponding type declarations. (ts)

(Note, it can't find the module, which is why it's an error. Other components don't have type declarations, but can be found, and that results in a warning, not an error.)

I think this is because main in package.json is set to a svelte file, which I don't believe is correct.

I get this error using svelte@next and snowpack:

Error: 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. This seems to happen with other external libraries too...

When importing FaLayers

import Fa, { FaLayers } from "svelte-fa";

It shows

SyntaxError: import not found: FaLayers

I tried to add the section displayed below to the rollup.config.js, copied from docs/ directory, but getting the following error:

ReferenceError: SvelteFa is not defined (in bundle.js)

globals: {
      'svelte-fa': 'SvelteFa',
    },
  },
  external: ['svelte-fa'],

How is the exact way of using the library?

Maybe it's just me, but I'm unable to do this (an any other styling via "class" or "svg" selector... Is this a bug?

(My setup is with routify).

<style>
   .some-class {
       position: absolute;
       right: 0;
  }
</style>
<Fa class="some-class" icon={faFlag} />

Installing svelte-fa using pnpm install svelte-fa -D

and using the following code for a component:

<!-- Logo.svelte -->
<script>
  import Fa from "svelte-fa"
  import { faCookie } from "@fortawesome/free-solid-svg-icons"
</script>

<Fa icon={faCookie} />

and then running npm run dev and navigating to localhost:3000 ...

will result in this error:

[vite] Error when evaluating SSR module /src/lib/Logo.svelte:
/Users/bc/Projects/SvelteKit/node_modules/.pnpm/[email protected]/node_modules/svelte-fa/src/fa.svelte:1
<script>
^

SyntaxError: Unexpected token '<'
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at nodeRequire (/Users/bc/Projects/SvelteKit/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-efe32886.js:68907:17)
    at ssrImport (/Users/bc/Projects/SvelteKit/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-efe32886.js:68865:20)
    at eval (/src/lib/Logo.svelte:7:31) (x2)

Here's my package.json:

"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@sveltejs/adapter-node": "next",
    "@sveltejs/adapter-static": "next",
    "@sveltejs/kit": "next",
    "@tailwindcss/jit": "^0.1.5",
    "autoprefixer": "^10.2.5",
    "cssnano": "^4.1.10",
    "postcss": "^8.2.8",
    "postcss-load-config": "^3.0.1",
    "postcss-preset-env": "^6.7.0",
    "svelte": "^3.35.0",
    "svelte-preprocess": "^4.6.9",
    "tailwindcss": "^2.0.4",
    "tslib": "^2.1.0",
    "svelte-fa": "^2.2.0",
    "typescript": "^4.2.3",
    "vite": "^2.1.2"
  },
  "type": "module",
  "engines": {
    "node": ">= 12.17.0"
  }
}

Hello there! in the code fences in the documentation site the word fontawesome is spelled as foRtawesome.
Thanks for the work wish you the best!

The devDependency svelte was updated from 3.16.3 to 3.16.4.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

svelte is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I was wondering if it's normal, but @fortawesome/free-solid-svg-icons is in devDependencies?
I had to do npm install @fortawesome/free-solid-svg-icons to works properly.

I know this is a FA icon manager, but i was using svelte-icons and is currently abandoned. the thing i liked the most from svelte-icons is the amount of icon packs available. Could you make add-ons for the others icon packs using svelte-fa as template?

Nice library and good job... thanks!

The Svelte Docs recommend setting default props on components to avoid compiler warnings, and even though it's not critical, many people appreciate using this convention.

It looks like color, primaryColor, and secondaryColor could use a default. The docs recommend setting to undefined if there is no other preferred default value.

export let icon;  // no default here makes sense
export let fw = false;
export let flip = false;
export let pull = false;
export let rotate = false;
export let size = false;
export let color = undefined;  // <--- add default

// Duotone Icons
export let primaryColor = undefined;  // <--- add default
export let secondaryColor = undefined;  // <--- add default
export let primaryOpacity = 1;
export let secondaryOpacity = 0.4;
export let swapOpacity = false;

The devDependency eslint-plugin-import was updated from 2.18.2 to 2.19.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-import is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

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

https://github.com/Cweili/svelte-fa/blob/73233b00dc0e5866ed935e505d44d9504c5a93be/src/fa.svelte#L52C1-L54C1

The devDependency rollup was updated from 1.18.0 to 1.19.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

When running in dev mode, I get the following error logged when reloading my page.

12:41:33 PM [vite-plugin-svelte] ssr compile done.
package         files     time     avg
frontend            2   23.9ms  12.0ms
Error: Not found: /fa.svelte
    at resolve (/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/respond.js:394:13)
    at resolve (/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/respond.js:243:5)
    at #options.hooks.handle (/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/index.js:41:55)
    at Module.respond (/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/respond.js:240:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

It all works, all icons show up and I can build my project without errors.

Imported as

import {
    faPowerOff,
    faEllipsisVertical,
    faCircle,
    faCircleUp,
    faCircleDown,
    faLock
} from '@fortawesome/free-solid-svg-icons';
import Fa from 'svelte-fa';

I've also tried explicitly importing svelte-fa (as the readme says) but the same error shows up.

Using "@sveltejs/kit": "^1.10.0" and "svelte-fa": "^3.0.3"

I was looking for the fa-linkedin and fa-github icons, but couldn't find them. They are available with the free version of FontAwesome and they are kind of essential for the website I am building. Could you add them to the package or is there a way I can add these icons myself maybe?

Thanks in advance!

FontAwesome supports layering, however there doesn't seem to be a way to enable it through this module.

Reference: https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/layering

Example Code:

<script>
	import Fa from 'svelte-fa'
	import { faBell, faExclamation } from '@fortawesome/free-solid-svg-icons';
</script>
<span class="fa-layers fa-fw fa-lg" style="background: grey;">
	<Fa icon={faBell} style='color: white' class="fas" />
	<Fa icon={faExclamation} size="xs" class="fas" style='color: red;'/>
</span>

This should produce a layered version where the exclamation is over the bell, instead it produces an exclamation next to the bell.

Hey there,

How is one supposed to dynamically scale/size an icon? The provided examples as well as the documentation only showcase the static sizes (xs, lg, xl... and so on). What if for example, I would like the icon to fill out all the available space within the current container?

I read, followed and tried the instruction on the documentations.
1.) this example works on development mode: - Note (SvelteKit/Vite)
import Fa from 'svelte-fa' import { faFlag } from '@fortawesome/free-solid-svg-icons'
but will failed on build

2.) this example cause errors on development and will not compile:
import Fa from 'svelte-fa/src/fa.svelte' import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons/index.es'
even with app.d.ts set to:
declare module '@fortawesome/free-solid-svg-icons/index.es' { export * from '@fortawesome/free-solid-svg-icons'; }

import Fa from "svelte-fa";

This triggers Using exported name 'Fa' as identifier for default export. eslint (import/no-named-as-default).

Changing the line to import { Fa } from "svelte-fa"; would not build in SvelteKit, throwing <Fa> is not a valid SSR component..

I'm not too sure what's causing this… Might be similar to import-js/eslint-plugin-import#544?