Implement support for SolidJS

[PauMAVA]

Hello,

We have implemented a port of iconoir to SolidJS as requested in #221.

The new library is found under the packages/iconoir-solid-js and the build scripts are in the appropriate build/targets/solid-js. We have ported all current features including the IconoirContext, the multiple entry points for each variant... The build process is similar to the vue build process which will generate first the actual src folder with all the icons and the IconoirContext. Then we build using vite, one of the de facto standards for solid-js. The build is done once for the global entry point and then once again for each variant so that we can use:

import { UndoCircle } from 'iconoir-solid-js/solid';
....
import { UndoCircle } from 'iconoir-solid-js/regular';
....
import { UndoCircle, UndoCircleSolid } from 'iconoir-solid-js';

We also build for both ESM and CJS. We have also updated the documentation and kept the MIT license as is.

We are open to feedback to make this happen, and for iconoir-solid-js package to be published in NPM.

Thank you!

---

@Level4Tech

---

P.D: You will also see changes in the bin/build/lib/ts.js file. We found a bug where in PowerShell instead of a Linux terminal the react build would fail out of the box due to path normalization.

Closes #221

[paescuj]

Thanks for your efforts @PauMAVA! ❤️
Could you grant me access to your branch ¹ please, so that I can finalize the PR?

Footnotes

1. https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork#enabling-repository-maintainer-permissions-on-existing-pull-requests ↩

[PauMAVA]

Hello @paescuj!

I have invited you as an Outside Collaborator to the fork. Since the repo is organization-owned, I cannot simply add permissions for only this PR.

There are some tasks that I consider should be done before merging:

1. Create a SolidJS icon
2. Modify the website part of the project to add the icon under the "Available For"
   
3. Also, SolidJS should be added under the "Libraries" in the documentation section of the website.
   

Thanks!

[PauMAVA]

Hi!

I know you probably have a lot of work. Is there any estimate on when this will be reviewed?

Thanks!

[caseybaggz]

Also waiting on this! Creating my own icon components is getting old fast 😅

[lucaburgio]

I honestly don't know how to proceed with this, so I'll wait for @paescuj !

[caseybaggz]

@paescuj is the only thing stopping this to update the branch (i.e. resolve conflicts) and get the docs updated?

[caseybaggz]

@PauMAVA is the only thing missing here (besides the conflict resolution) the update to docs? Since this has gone stale (but the community still needs it), I can find time to fork the work and just submit another PR if @paescuj has gone ghost?

[PauMAVA]

@caseybaggz In theory, yes only the docs are missing, but that also includes creating a solid-js icon to be put in the "Available for" section of the main page.

The library itself is fully done and we are already using it for some production projects.

[caseybaggz]

Here's an SVG starting point for the logo:

<svg fill="none" stroke-width="2" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-solidjs" width="1em" height="1em" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; color: currentcolor;"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M2 17.5c4.667 3 8 4.5 10 4.5c2.5 0 4 -1.5 4 -3.5s-1.5 -3.5 -4 -3.5c-2 0 -5.333 .833 -10 2.5z"></path><path d="M5 13.5c4.667 -1.667 8 -2.5 10 -2.5c2.5 0 4 1.5 4 3.5c0 .738 -.204 1.408 -.588 1.96l-2.883 3.825"></path><path d="M22 6.5c-4 -3 -8 -4.5 -10 -4.5c-2.04 0 -2.618 .463 -3.419 1.545"></path><path d="M2 17.5l3 -4"></path><path d="M22 6.5l-3 4"></path><path d="M8.581 3.545l-2.953 3.711"></path><path d="M7.416 12.662c-1.51 -.476 -2.416 -1.479 -2.416 -3.162c0 -2.5 1.5 -3.5 4 -3.5c1.688 0 5.087 1.068 8.198 3.204a114.76 114.76 0 0 1 1.802 1.296l-2.302 .785"></path></svg>

[paescuj]

Heyo, sorry for the ghosting! I'll happily dive into it again tomorrow 👍

[lucaburgio]

Any update @paescuj ?

[paescuj]

@lucaburgio It's coming along, still needs some final clean-ups and additions (mostly docs) 👌

Do you think you could come up with a corresponding icon as mentioned in #493 (comment)?

I'd also like to ensure that we use consistent branding everywhere:
Solid vs. SolidJS (@iconoir/solid | @iconoir/solidjs | @iconoir/solid-js)

I'm tending to Solid (@iconoir/solid) as it appears to be what they officially refer to more often (e.g. in the docs: https://docs.solidjs.com/) and would be in line with our Vue library (@iconoir/vue). WDYT?

[PauMAVA]

Here's an SVG starting point for the logo:

<svg fill="none" stroke-width="2" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-solidjs" width="1em" height="1em" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; color: currentcolor;"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M2 17.5c4.667 3 8 4.5 10 4.5c2.5 0 4 -1.5 4 -3.5s-1.5 -3.5 -4 -3.5c-2 0 -5.333 .833 -10 2.5z"></path><path d="M5 13.5c4.667 -1.667 8 -2.5 10 -2.5c2.5 0 4 1.5 4 3.5c0 .738 -.204 1.408 -.588 1.96l-2.883 3.825"></path><path d="M22 6.5c-4 -3 -8 -4.5 -10 -4.5c-2.04 0 -2.618 .463 -3.419 1.545"></path><path d="M2 17.5l3 -4"></path><path d="M22 6.5l-3 4"></path><path d="M8.581 3.545l-2.953 3.711"></path><path d="M7.416 12.662c-1.51 -.476 -2.416 -1.479 -2.416 -3.162c0 -2.5 1.5 -3.5 4 -3.5c1.688 0 5.087 1.068 8.198 3.204a114.76 114.76 0 0 1 1.802 1.296l-2.302 .785"></path></svg>

@paescuj, @caseybaggz design is quite good.

Also, about the package naming we did start with @iconoir/solid but we shifted to @iconoir/solidjs because it was kind of confusing with the types of icons (solid and regular). But for us all options are good.

[caseybaggz]

Here's an SVG starting point for the logo:

<svg fill="none" stroke-width="2" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-solidjs" width="1em" height="1em" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; color: currentcolor;"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M2 17.5c4.667 3 8 4.5 10 4.5c2.5 0 4 -1.5 4 -3.5s-1.5 -3.5 -4 -3.5c-2 0 -5.333 .833 -10 2.5z"></path><path d="M5 13.5c4.667 -1.667 8 -2.5 10 -2.5c2.5 0 4 1.5 4 3.5c0 .738 -.204 1.408 -.588 1.96l-2.883 3.825"></path><path d="M22 6.5c-4 -3 -8 -4.5 -10 -4.5c-2.04 0 -2.618 .463 -3.419 1.545"></path><path d="M2 17.5l3 -4"></path><path d="M22 6.5l-3 4"></path><path d="M8.581 3.545l-2.953 3.711"></path><path d="M7.416 12.662c-1.51 -.476 -2.416 -1.479 -2.416 -3.162c0 -2.5 1.5 -3.5 4 -3.5c1.688 0 5.087 1.068 8.198 3.204a114.76 114.76 0 0 1 1.802 1.296l-2.302 .785"></path></svg>

@paescuj, @caseybaggz design is quite good.

Also, about the package naming we did start with @iconoir/solid but we shifted to @iconoir/solidjs because it was kind of confusing with the types of icons (solid and regular). But for us all options are good.

Alright! LFG! 🚀 👏 🙌

[paescuj]

Also, about the package naming we did start with @iconoir/solid but we shifted to @iconoir/solidjs because it was kind of confusing with the types of icons (solid and regular). But for us all options are good.

Solid thinking 😉 Appreciate your feedback, sounds good to me!