Add support for server components

[melkstam]

With the release of React 18 (and NextJS 13), server components are supported and will most certainly get utilized more going forward. It would be nice of phosphor-react to support this. It does currently seem to be limited by the usage of React.Context.

Possible solutions would be to use the "use client" directive (reactjs/rfcs#227) or in some way make the context optional.

[ozgur-dogan]

+1

[L-Marcel]

+1

[sungvzer]

+1
One of the best features of Next.js is server components and because Phosphor Icons uses React contexts it cannot be used in a Next 13 project unless a client component is used, which kinda defeats the purpose of server components.

[maximehery]

+1

[rektdeckard]

Hey all. Looking into this for upcoming 2.0 release 👍

[its-monotype]

My favorite icons, I like them so much. I am incredibly grateful to the creators 😍

[rektdeckard]

Wondering what people feel would be good default styling in lieu of context server-side -- black, regular weight, 1em size?

[eiiot]

+1

[melkstam]

Wondering what people feel would be good default styling in lieu of context server-side -- black, regular weight, 1em size?

I feel like that these are pretty good default values and is what I would expect.

[rektdeckard]

Having read and partially 😂 understood the RFC, it seems that a "use client"; directive essentially "poisons" everything in the subtree, yes? That understood, IconBase.tsx, which is the only component referencing useContext and called by every icon, just needs a "use client"; at the top, and we force this code into the client bundle. Correct me if I'm wrong about that.

It would be really nice, although maybe quite complex, if we had some sort of conditional directive to allow different behaviors on server- and client-side, a la:

let defaultValues = { size, weight, color, mirrored };
"if client";
defaultValues = useContext(IconContext);
"endif";

[MatheusPires99]

Any updates on this topic?

[rektdeckard]

Prelim support added in v2.0.0, under new package name @phosphor-icons/react. Looking at ways in future of not needing to force IconBase onto the client, because rendering the entire icon on the server would be sweet but I don't want to break the context use case.

[vnugent]

I love this library!
@rektdeckard whenever we can use it our Next projects could you please leave a comment here? (so we all can get a notification). Thank you very much!

[thewinger]

Is there an update?
I see a PR, tried to installed it with Yarn to try it but couldn't, don't know why.

[dgknca]

still waiting