Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'use client' in client icons and IconContext #92

Open
brianle1301 opened this issue Apr 13, 2024 · 2 comments
Open

'use client' in client icons and IconContext #92

brianle1301 opened this issue Apr 13, 2024 · 2 comments
Assignees
Labels
enhancement New feature or request

Comments

@brianle1301
Copy link

brianle1301 commented Apr 13, 2024

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

@brianle1301 brianle1301 added the bug Something isn't working label Apr 13, 2024
@rektdeckard rektdeckard added enhancement New feature or request and removed bug Something isn't working labels Apr 18, 2024
@henokyehulu
Copy link

Any other workarounds until this gets fixed?

@mauricekleine
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants