Open brianle1301 opened 5 months ago
Any other workarounds until this gets fixed?
@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 />
}
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 ofIconContext
, 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 aIconProvider
component (withuse client
), which simply forwards all icon props to the underlyingIconContext
. 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:
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