I'm getting parse errors when using ES6 to import some of the icons due to the hyphens used.

I have searched for a solution to this online but found none. What is the recommended way to use the icons that export names with hyphens?

run npm run build pre-publish

Hey there,

Haven't seen this question asked nor have I seen it directly referenced in the docs. Would it be safe to assume that duo tones are not supported?

Hello, Rob.

After running w3 validator, I found multiple errors caused by icons path duplicating ID's.

They all render the same ID.

e.g.
<path id="path-0" ... >
<path id="path-0" ... >
<path id="path-0" ... >

Any workaround for this?

Thanks!

Hi there!

I've installed all of the @FortAwesome npm packages and installed it just as in the README. I get the following error when running a dev build.

Error: 'faGithub' is not exported by node_modules/@fortawesome/free-brands-svg-icons/index.js

If you need more information, please let me know.

Thank you!

Adding vertical-align: sub; property in browser fixes this. Making this the default or providing a dedicated option for this would be awesome.

This is happening with FontAwesome V5 icons, haven't tested the builtin ones yet.

I'd be willing to also help with your docs/fixing this little issue if you'd like!

Hi,

I tried using svelte-awesome in a SvelteKit project

<script>
	import Icon from 'svelte-awesome';
	import { beer } from 'svelte-awesome/icons';
</script>

<Icon data={beer} />

and get the following errors

Failed to fetch dynamically imported module: http://localhost:3000/src/routes/index.svelte
TypeError: Failed to fetch dynamically imported module: http://localhost:3000/src/routes/index.svelte

Uncaught (in promise) TypeError: Failed to fetch
index.js:556 GET http://localhost:3000/node_modules/svelte-awesome/icons/buysellads.js?v=4e79ebf0 net::ERR_FAILED

I tried

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

but it didnt work either....

Error: 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

Will you upgrade to support Svelte 2.x?

I found Icon that I want to use but it's not part of this repository. How do I add it to my svelte/sapper app? https://fontawesome.com/icons/utensils?style=solid

Hi,

Thanks for creating this - I'm very glad to have found it!

I've noticed that you aren't exposing a svelte property from package.json which would allow me to use this in my own project (links to uncompiled root component file).

Would you be able to expose this property please?

Thanks!

I am currently trying to implement CSP with Sapper and running into issues where svelte-awesome is setting empty style attributes like here: <svg version="1.1" class="fa-icon svelte-1x7upcw" width="15.5" height="16" role="presentation" viewBox="0 0 496 512" style="">

My CSP policy forbids to use inline styles and this style attribute is redundant, so it would be great to adapt this in the codebase.

Hello !

First thanks for this library, it's great.

Got a bit of an issue while using vscode. It seems like everytime we use the Icon components, two new "problem" appears in the "problems" tabs of VSCode:

Element does not support attributes because type definitions are missing for this Svelte Component or element cannot be used as such.

Underlying error:
JSX element class does not support attributes because it does not have a '$$prop_def' property.

Type definitions are missing for this Svelte Component. It needs a class definition with at least the property '$$prop_def' which should contain a map of input property definitions.
Example:
  class ComponentName { $$prop_def: { propertyName: string; } }
If you are using Svelte 3.31+, use SvelteComponentTyped:
  import type { SvelteComponentTyped } from "svelte";
  class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {}

Underlying error:
'Icon' cannot be used as a JSX component.
  Its instance type 'Icon' is not a valid JSX element.

I'm new to svelte and using this nice plugin. Using svelte-kit and testing out. When I'm in dev mode I get the warning in the console <Icon> was created with unknown prop 'aria-hidden'. My code is correct (I think?).

<Icon data="{link.icon.data}" class="menu-item-icon {link.icon.name} {group}-icon" aria-hidden="true" />

and when finally embedded in the rendered html:

<svg version="1.1" class="fa-icon menu-item-icon phone header-icon svelte-a5cb43" width="12.571428571428571" height="16" aria-label="" role="presentation" viewBox="0 0 1408 1792" style="">...</svg>

I'm using this as an icon aside text so it is not important for screen-readers since it's strictly a visual presentation. Is this an issue with svelte-awesome, svelte-kit, or my bad coding?

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.

currently the project has no tests, need to create a test suite, potentially using https://www.npmjs.com/package/@testing-library/svelte

Is it possible to use a better, more uniform svg for the external link icon? Something like this...

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
    aria-hidden="true" class="w-5 h-5">
    <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>

If so, could I open a PR for this?

the type is set to module, which means that the imports must be valid ESM, end with the .js which the icons/index.js does not have, and this breaks imports in webpack.

Here is the screenshot of the portion of the errors

Does this library support tree shaking for Font Awesome 4? If not, tree shaking might be easier to implement in Font Awesome 5.

The most important part of tree shaking Font Awesome 4 IMO is not actually tree shaking the CSS, but tree shaking the 1 MB font files included. http://fontello.com/ does this pretty well but requires you to manually pick your icons ahead of time (but at least supports a config file) and also they randomly rename them from FA4 without keeping the original names as aliases for the search.

Hello,

I am building an app using Sapper and Font-awesome Icon Pro, and of course svelte-awesome.
I encountered a problem that setting font-size on Icons does not work (after I migrated my code from svelte to sapper)

It might be a problem with Font-awesome icons. I checked @fort-awesome source code in Node_modules folder, and there is no source code but only compiled code ( not sure if there is the cause )

• angular style commit messages
• add CONTRIBUTING.md

Excuse me for being dense, as I'm sure this is on my end. Javascript isn't my first language and I'm not sure how to get around this.

If I take the examples from the docs and want to use an outlined version of an icon, this is what the syntax looks like, albeit invalid.

import { heart-o } from 'svelte-awesome/icons';

Linting complains and I can't get the heart-o to import due to the "-" in the javascript file. Any help would be much appreciated. If you have an obvious answer, I'd be happy to take that answer and create a PR to improve the docs for this use case, as using outline vs solid versions of icons is a common feature in other libraries. I doubt I'm the first to run into this. Thank you for this library!!

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.

Good luck with your project ✨

Your semantic-release bot 📦🚀

It would be great if there would be a simple way to use the fontawesome-pro icons.

Hello,

I can see that PR for svelte 3 compatibility has been merged into master back in May, which is 👍, nonetheless, could we think about having a/this new version published on NPM ?

Thanks for the work!

Since v5 have many new icons, its time now to upgrade to v5 to be used by default with svelte-awesome. This enhancement would be appreciated.

Hello !
Thanks agan for the fantastic work :)
When I try to update ( or install ) 2.4.3, I get this error:

npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name ">=3.43.1,<4.0.0": Tags may not have any characters that encodeURIComponent encodes.

When I click a button which contains a icon, what should I do to change the object in data and I can immediately see it changing in a js function?
I am a student tring to learn by myself, if I ask something stupid, I am very sorry.
Thank you.

I am trying to render icons depending on strings with the icon names that I initiate the component with. Is it possible to import icons dynamically depending on a configuration set at runtime e.g. from a string? It seems like including fontawesome in a link tag doesn't render <i> tags in web components with their own shadow root (haven't tested without customElements: true).

ref should be replaced with bind:this

It looks like onupdate in Path.html can be called before the html is rendered, making refs.path undefined.

Having a guard against an undefined refs.path should fix the issue.

I'm trying to stack icons and the examples aren't working. Is that still supported?

Observed Behavior:

Importing the svelte-awesome package and icons (or a single icon) triggers hundreds of JS requests. In my app the total HTTP requests jumped from 52 to 839.

Steps to reproduce:

In package.json dependencies:

"svelte-awesome": "^2.4.6"

In any .svelte component:

import Icon from 'svelte-awesome';
import { times } from 'svelte-awesome/icons';

Observe the Network tab in dev tools and see the difference when import { times } from 'svelte-awesome/icons'; is removed from the component.

Expected Behavior:
Unless I'm misunderstanding or importing this wrong, I'd expect importing one icon to make one additional request.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Use vinylfs when generating svg from font-awesome

how is it possible to display inline ?

After updating the npm package of my existing project, a new error is thrown as

Missing "./icons/arrow-left.js" export in "svelte-awesome" package
Error: Missing "./icons/arrow-left.js" export in "svelte-awesome" package

I think I am importing it correctly

import Icon from 'svelte-awesome/components/Icon.svelte';
import { arrowLeft } from 'svelte-awesome/icons';

I'm using sveltekit version ^1.0.0-next.180. But I'm not sure what is causing this error

I am getting

ReferenceError: freeSolidSvgIcons is not defined

on the basic example. You rollup.config.js does not contain any 'externa' nor 'output' sections, what am I doing wrong?

getting error in sveltekit (also tried sapper approach from readme)

export { default as glass } from './glass';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1024:16)

When importing an icon:

import 'svelte-awesome/icons/chevron-left.js'

The following error occurs:

TypeError: _components_Icon_html__WEBPACK_IMPORTED_MODULE_0__.default.register is not a function

I was importing this package into my header component. It took a good long while to figure out why HMR stopped working in SvelteKit. Turns out, it was this package. To replicate, base install of sveltekit, and then svelteadd tailwind and mdsvex.

Cheers!

• I try testing my svelte App, with this setup https://daveceddia.com/svelte-typescript-jest/
• errors in test:

Details:

    C:\Users\tomaz\Documents\NetBeansProjects\GitLab_Arnes\portal-hub\analizator\frontend\node_modules\svelte-awesome\icons\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { default as glass } from './glass';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

 4 |   import Paginator from "./Paginator.svelte";
      5 |   import Icon from "svelte-awesome";
    > 6 |   import { info, expand } from "svelte-awesome/icons";
        |                        ^
      7 |   import { faFileExcel } from "@fortawesome/free-solid-svg-icons";
      8 |   import { QueriesService } from "../../services/queries.service";
      9 |   import { querysStore } from "../../services/stores/store";