Support next.js app router/RSC

[phosphor-icons]

Support next.js app router/RSC

[dsbrianwebster]

Seconding this. We LOVE phosphor-icons and use it a lot, but the context approach means having to turn every component that needs an icon into a client component which is a deal breaker for us.

[AmruthPillai]

Not the most ideal solution, but for those like me who didn't prefer to copy-paste SVG code into their own codebase, this is what I'm currently using as a workaround.

I first create a file components/shared/Icons.tsx with the following code:

"use client";

export {
    AddressBook,
    AirTrafficControl,
    Airplane,
    ...
} from "@phosphor-icons/react";

Now, I just import any icon I have already imported in another server component, like this:

import { AddressBook } from "@/components/shared/Icons";

<AddressBook weight="thin" size={16} />

When @phosphor-icons/react has been updated to support the app router (and I do hope it's soon), I would just Find and Replace All Occurrences of @/components/shared/Icons with the actual package.

[rektdeckard]

Experimental support for RSC is now live on NPM under version 2.1.3. You can install with with version number, or npm i @phosphor-icons/react@next. In order to use RSC-friendly icons, you must now import them from /dist/ssr, I.E.

import { Smiley } from "@phosphor-icons/react/dist/ssr";

function MyServerComponent() {
  return <Smiley size="2em" color="limegreen" />;
}

Please give this a try and let me know how it works for you. Any input or contributions are also welcome.

[simenandre]

I created a fork, phosphor-react-sc, which removes the useContext feature of @phosphor-icons/react so we can enjoy phosphor icons and React Server Components without having to use 'use client' or re-exporting.

The repository can be found here:
https://github.com/simenandre/phosphor-react-sc

Install it as such:

pnpm add phoshor-react-sc

The plan is to maintain it with the same API as @phoshor-icons/react, and deprecate if and when @phoshor-icons/react supports React Server Components without using 'use client'. Feel free to contribute though!

@rektdeckard If you'd like this to be published under @phoshor-icons/..., I'd be happy to help get that going 🙌

[patrickedqvist]

Would love to see this package have support for rendering in a server context. I'm also using Next.js 13.4 where React Server Components are standard and being forced to throw in "use client" just to accommodate the use of context doesn't feel very good. I'm totally fine with losing the ability to control Icons with a context in order to be able to render some plain SVG on the server instead. Usually, styling of a set of icons is usually done with CSS anyway.

[dsbrianwebster]

Hi all following and 👍 'ing this issue. While we await what will likely be a bigger change from the package maintainer to move away from the context dependency, me and my team has been doing the following to continue using Phosphor icons with RSC...

We have temporarily uninstalled @phosphor-icons/react 😪, and we are basically downloading the svgs we need for the project from https://phosphoricons.com then creating simple component exports ensuring to use the exact same naming conventions as the Phosphor React package. This ensures we have an easy path to replace the imports from our local components and import directly from @phosphor-icons/react package once we can use it again.

While this is far from ideal, it does give us a fairly straightforward pathway once this is resolved. Here is a example excerpt for anyone who may find this workaround acceptable for their project...

/src/components/icons/phosphor.tsx

/**
 * NOTE: We are manually adding the icons to the library because the library
 * is not currently set up to work with Next 13 app router/react server components.
 * https://github.com/phosphor-icons/react/issues/54
 */

import { ComponentPropsWithoutRef } from 'react';

export function MagnifyingGlass(props: Omit<ComponentPropsWithoutRef<'svg'>, 'fill' | 'viewBox' | 'xmlns'>) {
  const { width = '32', height = '32', ...rest } = props;

  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width={width}
      height={height}
      fill='currentColor'
      viewBox='0 0 256 256'
      {...rest}
    >
      <path d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'></path>
    </svg>
  );
}

export function X(props: Omit<ComponentPropsWithoutRef<'svg'>, 'fill' | 'viewBox' | 'xmlns'>) {
  const { width = '32', height = '32', ...rest } = props;

  return (
    <svg xmlns='http://www.w3.org/2000/svg' width={width} fill='currentColor' viewBox='0 0 256 256' {...rest}>
      <path d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'></path>
    </svg>
  );
}

// ... add more icon components

[guilhermesalvi]

Hi! It is possible that this feature will be released?

[rektdeckard]

Live on stable versions >-2.0.13. Marking as resolved.

[dsbrianwebster]

@AmruthPillai this is awesome too. Definitely improves the DX in that you don't need to copy the SVGs! 👏

I'm still super hung up on the notion that every time we want to use an icon it means rendering a client component, so for me, I probably prefer the annoying extra step of grabbing the SVG since it lets us keep icons as server components.

Either way, between both of our examples, I'd say we've provided some good workarounds until we see where things end up with the package 🍻

[arobert93]

@vrazn You can split the icons into multiple files.

Instead of:

File: src/components/icons.tsx

'use client';

export { Cube } from '@phosphor-icons/react';

You have to do a specific import & export:

File: src/components/icons/Cube.tsx

'use client';

import Cube from '@phosphor-icons/react/dist/icons/Cube';
export default Cube;

Now import it in your component:

import Cube from 'src/components/icons/Cube';

This should only import 1 module only.

[mrkpatchaa]

Instead of having 2 packages to maintain, We could only have one but change the assemble process to generate 2 types of components.
We "just" need to combine what's currently in place with what @simenandre built. 👀
I am currently using @AmruthPillai method to bypass the limitation.

[phpaulohenrique]

up

[lionelrudaz]

I've followed the same methodology as @AmruthPillai. Works great.

[vrazn]

For me, following this approach leads to an inflated js bundle.

Seems like tree-shaking stops working when the icons are being imported by a server component (seems like client ones work fine). Instead of taking only the required icons, server component imports all of them.

[cosmos-redshift]

yeah, I agree, there should be two repos, the old way (I'm still using "phosphor-react": "^1.3.1",) and my nextjs project still uses pages/ and the new way (for NextJS 13 and app/ approach).

Updating to app/ folder approach and adding 'use client' will be a lot of work. Is there any way to get the new icons but keep the old way of importing?

[arobert93]

For those who use webpack and do not want to manually create wrappers over Phosphor imports with "use client", you can use this:

Add this to your webpack config:

webpack: function (config) {
    config.module.rules.push({
      test: [/node_modules\/@phosphor-icons\/react\//],
      loader: require.resolve('./loaders/use-client-loader.js'),
    });

    return config;
  },

// File: loaders/use-client-loader.js

module.exports = function (source) {
  return `"use client";\n` + source;
};

[nikolailehbrink]

Hi @rektdeckard, just wanted to ask, if a fix is going to be planned for the future?

[rektdeckard]

Thanks @simenandre for the work you put in to port. The issue on my end has always been maintaining backward compatibility for CSR users and IconContext while still providing a unified package. I think the current approach is a nice middle-ground. Comments welcome over on #64