Giter Site home page Giter Site logo

robbrazier / svelte-awesome Goto Github PK

View Code? Open in Web Editor NEW
491.0 491.0 26.0 14.19 MB

Awesome SVG icon component for Svelte JS, built with Font Awesome icons. Based on Justineo/vue-awesome

Home Page: https://docs.robbrazier.com/svelte-awesome/

License: MIT License

JavaScript 0.06% Svelte 1.52% HTML 0.03% CSS 0.20% TypeScript 98.19%
font font-awesome icon icons svelte sveltejs svg svg-icon-component svg-icons

svelte-awesome's Introduction

Hi there ๐Ÿ‘‹

I have some of my public projects on this GitHub repository but also use Codeberg

RobBrazier's GitHub stats

svelte-awesome's People

Contributors

benmccann avatar dependabot-preview[bot] avatar dependabot-support avatar dependabot[bot] avatar der-penz avatar dimfeld avatar josdejong avatar lucasnad27 avatar mergify[bot] avatar renovate[bot] avatar robbrazier avatar tristanbrotherton avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

svelte-awesome's Issues

Hundreds of Network Requests When Importing One Icon

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.

Updated default to v5 of fontawesome

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.

Using this with Sapper and SSR

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.

CSS font-size does not work for sapper app icons.

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)

ไผไธšๅพฎไฟกๆˆชๅ›พ_6f3656d5-61ca-4e03-ad09-638107da9419

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 )

How to use it exactly

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?

Importing Icons with Hyphens

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?

How to switch icons on click?

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.

New version on NPM

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!

Importing icons with "-"

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

Don't set inline style when unused

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.

The automated release is failing ๐Ÿšจ

๐Ÿšจ 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:

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 ๐Ÿ“ฆ๐Ÿš€

Tree Shaking?

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.

<Icon> is not a valid SSR component.

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

Icons not exported

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!

not working in sveltekit

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)

Invalid HTML when using multiple icons

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!

doesn't work with webpack when using named imports

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
image

error testing with svelte-typescript-jest

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";

Export `svelte` from package.json

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!

Package breaks HMR in SvelteKit with Tailwind

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!

"Problems" in vscode

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.

Icons are not inline with text

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!

Possible to import icons dynamically?

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).

Issue with sveltekit after latest update

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

cannot update to 2.4.3

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.

<Icon> was created with unknown prop 'aria-hidden'

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?

SvelteKit Error

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

The automated release is failing ๐Ÿšจ

๐Ÿšจ 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:

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 ๐Ÿ“ฆ๐Ÿš€

[Suggestion] Improved `externalLink` icon

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.