qwikest/icons

Usage example in readme.md does not work

Closed this issue ยท 10 comments

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

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.

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

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

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

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

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

image

@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

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

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

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