'use client' in client icons and IconContext

[Brian Le]

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?

[Maurice Kleine]

@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 />
}