qwikest / icons

Include popular icons easily in your Qwik projects with @qwikest/icons 🚀
Other
81 stars 5 forks source link

Usage example in readme.md does not work #12

Closed rolanday closed 1 year ago

rolanday commented 1 year ago

No such lucide folder under @qwikest/icons after installing with pnpm add @qwikest/icons, and basic usage example provided in readme.md fails as a result.

    "@qwikest/icons": "^0.0.7",

Attached for dist folder treeview. I was excited to see this lib instead of using my own rolled solution for fa icons, but sadly, this is fail out of the gate for me. Not sure how it's at all working for other folks for passed testing before publish to NPM.

out.txt

NiklasPor commented 1 year ago

There's currently a big issue (#3) with the latest version (in combination with Qwik 1+). I already got a working prototype, but the dev server is significantly slowed down.

Once the dev experience is acceptable again, I'll create a next release. Sorry for the inconveniences.

NiklasPor commented 1 year ago

Version 0.0.8 should be working now, the imports are working via the package.json, exports and typesVersion fields. That's why the folder structure looks different.

Bootstrap icon usage would look like this for example:

import { Bs1Circle } from "@qwikest/icons/bootstrap";
astraldev commented 1 year ago

There's also no documentation on how to use the suffix for getting an icon with a variant.

NiklasPor commented 1 year ago

There's also no documentation on how to use the suffix for getting an icon with a variant.

It's simply a second component. For an outline variant it could look like this:

import { IoAirplaneOutline } from "@qwikest/icons/ionicons";
astraldev commented 1 year ago

Oh great. Icons now work but still the duplicate jsx node implementation warning.

rspauwen commented 1 year ago

@NiklasPor, with version 0.0.8, we get the following error. Any idea why this is happening?

image

NiklasPor commented 1 year ago

@rspauwen make sure that you're really on version 0.0.8 and maybe restart VSCode, or the TypeScript language server. The imports should work, you could take a look at this code sandbox, which shows example usage:

https://codesandbox.io/p/sandbox/qwik-icons-example-pni4bo?file=%2Fsrc%2Froutes%2Findex.tsx%3A22%2C28

Also the variants are now available as suffix, so you probably want to update your import: image

NiklasPor commented 1 year ago

Which package manager are you using? I've only tested with npm & pnpm - although I'd expect it also to work with yarn 👀

rspauwen commented 1 year ago

You're right: I had to add a Outline suffix to get the import working. Thanks for the quick response!

NiklasPor commented 1 year ago

As the initial seems to be fixed and there's another issue for the warning. I'll close this one 👋