Comments (15)
Prelim support added in v2.0.0
, under new package name @phosphor-icons/react
. Looking at ways in future of not needing to force IconBase
onto the client, because rendering the entire icon on the server would be sweet but I don't want to break the context use case.
from react.
+1
One of the best features of Next.js is server components and because Phosphor Icons uses React contexts it cannot be used in a Next 13 project unless a client component is used, which kinda defeats the purpose of server components.
from react.
Hey all. Looking into this for upcoming 2.0 release 👍
from react.
+1
from react.
+1
from react.
My favorite icons, I like them so much. I am incredibly grateful to the creators 😍
from react.
Wondering what people feel would be good default styling in lieu of context server-side -- black, regular weight, 1em size?
from react.
+1
from react.
Any updates on this topic?
from react.
I love this library!
@rektdeckard whenever we can use it our Next projects could you please leave a comment here? (so we all can get a notification). Thank you very much!
from react.
+1
from react.
Wondering what people feel would be good default styling in lieu of context server-side -- black, regular weight, 1em size?
I feel like that these are pretty good default values and is what I would expect.
from react.
Having read and partially 😂 understood the RFC, it seems that a "use client";
directive essentially "poisons" everything in the subtree, yes? That understood, IconBase.tsx
, which is the only component referencing useContext
and called by every icon, just needs a "use client"; at the top, and we force this code into the client bundle. Correct me if I'm wrong about that.
It would be really nice, although maybe quite complex, if we had some sort of conditional directive to allow different behaviors on server- and client-side, a la:
let defaultValues = { size, weight, color, mirrored };
"if client";
defaultValues = useContext(IconContext);
"endif";
from react.
Is there an update?
I see a PR, tried to installed it with Yarn to try it but couldn't, don't know why.
from react.
still waiting
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.