'use client' in client icons and IconContext

[brianle1301]

Describe the bug

Not really a bug, but rather a feature request.

When using an icon with Next.js App Router, one would need to either use the server component version (under /dist/ssr) or make the outer component a client component. The former doesn't support the use of IconContext, and the latter is a mild inconvenience. Would be very nice to be able to use the client icons directly inside server components.

An approach to this is to have 'use client' at the top of every client icon file and introduce a IconProvider component (with use client), which simply forwards all icon props to the underlying IconContext. I am unsure if these additions will make for a breaking change, but they are pretty straightforward for massive DX improvement.

A React Server Component can then be written concisely like so:

// page.tsx
import { IconProvider, User as UserIcon } from '@phosphor-icons/react';

export default function UserPage() {
  return (
    <IconProvider size={20}>
      <div className="blah blah">
        <UserIcon />
      </div>
    </IconProvider>
  );
}

Steps to Reproduce

N/A

Expected behavior

N/A

Screenshots

N/A

Context (please complete the following information):

N/A

Additional notes

I can certainly help with this, but need to know any potential implications on users who don't use React Server Components or Next.js

[henokyehulu]

Any other workarounds until this gets fixed?

[mauricekleine]

@henokyehulu you can re-export while adding the "use client" directive:

// app/ui/icons.tsx
"use client"

export { LinkedinLogo } from "@phosphor-icons/react"

and then import from that file instead:

import { LinkedinLogo } from "./ui/icons.tsx"

export default function Page() {
  return <LinkedinLogo />
}

[flyingace]

The above may be a workaround "until this gets fixed" but since the last post was from May 30, 2024 I'm led to ask whether this is something that is on the road map to be fixed.

[Curetix]

The easiest solution to this would be to import the icons from @phosphor-icons/react/ssr instead, those don't use React Context and work in SSR environments. Docs

PR #143 would also fix this, but there has been no reaction from the maintainers so far.