phosphor-icons / react

A flexible icon family for React
https://phosphoricons.com
MIT License
1.1k stars 57 forks source link

True RSC support, CJS compile-time exports. #64

Closed rektdeckard closed 1 year ago

rektdeckard commented 1 year ago

This patch refactors a fair amount of the lib to solve several problems:

  1. Support of React Server Components without forcing "use client" (principally for NextJS users)
  2. Support of CJS-based build tooling, and possibly obviate the need to modularizeImports in NextJS builds, and should also fix EMFILE exceptions during compilation

The way this works:

What this should now look like for real-world users:

// CSR application
import { Smiley } from "@phosphor-icons/react";

function MyRegularComponent() {
  return <Smiley size={48} color="limegreen" />;
}
// NextJS 13+ app Server Component
import { Smiley } from "@phosphor-icons/react/dist/ssr";

function MyServerComponent() {
  return <Smiley size={48} color="limegreen" />;
}
rektdeckard commented 1 year ago

This build is live on NPM under version 2.1.3, or the @next tag

rektdeckard commented 1 year ago

Considering making this the default behavior rather than the exception, I.E.

import { Fish } from "@phosphor-icons/react"; // SSR version
import { Fish as ClientFish } from "@phosphor-icons/react/dist/csr"; // CSR version with `useContext`

This may make sense given that Context usage is probably pretty rare, and Next.js and other frameworks supporting RSC are on the rise.