Comments (18)
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.
from react.
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.
from react.
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.
from react.
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 🙌
from react.
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.
from react.
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
from react.
Hi! It is possible that this feature will be released?
from react.
Live on stable versions >-2.0.13
. Marking as resolved.
from react.
@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 🍻
from react.
@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.
from react.
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.
from react.
up
from react.
I've followed the same methodology as @AmruthPillai. Works great.
from react.
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.
from react.
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?
from react.
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;
};
from react.
Hi @rektdeckard, just wanted to ask, if a fix is going to be planned for the future?
from react.
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
from react.
Related Issues (20)
- Add `@preview` tag to enable icon previews in jsdoc HOT 4
- Could not find a declaration file when using SSR HOT 2
- SSR Components missing default size="1em"
- SSR component types are not resolving
- allow to add Contributing.md file.
- Importing icons from `@phosphor-icons/react/dist/ssr` renders the icons, but gives issues in the editor HOT 5
- TypeError: Cannot create property 'displayName' on number 'Infinity' HOT 7
- Unble to dynamic import icons .mjs extensions HOT 9
- Icon instance className overwrites context className HOT 8
- New Twitter (x.com) icon? HOT 1
- Cannot find package on node 20 HOT 6
- ./node_modules/@phosphor-icons/react/dist/lib/context.mjs Can't import the named export 'createContext' from non EcmaScript module (only default export is available) HOT 10
- UnhandledRejection Error: Cannot Find React Package HOT 23
- 'use client' in client icons and IconContext HOT 2
- React warning after update to 2.1.4 HOT 1
- Issue updating past 2.1.3 HOT 2
- Incorrect exports specified in `package.json` HOT 1
- Jest test fails if importing directly from `/dist` folder
- Custom icons: Typescript and ESLint errors in Next.js 14 HOT 1
- React web pack build error in phosphor icons HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.