Comments (2)
Ok so apparently this is the expected behavior from Next.js when global CSS files are being imported (even in external packages). There's an RFC regarding it here. To sum up the discussion, it seems that users complain about this and that they have opted out of this behavior in Next.js 13 with App Router.
So for users that use sanity-plugin-icon-picker in a Next.js embedded Sanity Studio that's not using Next.js App Router this is a problem.
I've looked into several workarounds and found these two packages:
How ever, none of these seem to do the trick for me when testing with a Next.js (13.4.3) embedded Sanity Studio.
So how can we work around this?
The problem is this css import which is a workaround for this F7 issue.
Potential solutions:
- Dynamic imports / Import the F7 provider only if necessary. Users that experience this tricky problem could opt out from using F7 through provider option as specified here. How ever this will require us to import the problematic css file dynamically (when needed).
- Filter out the problematic SVG icons and generate pure F7 SVG Icons instead of using the <\i> tag with the globally loaded css
- Create a version of sanity-plugin-icon-picker that does not include Framework 7 icons provider which can be used for users that are using Next.js without App Router (and add to Readme)
- Create a fork/PR of F7 icons and fix all the problematic SVGs in the same manner as here framework7io/framework7-icons@3f7bda9
from sanity-plugin-icon-picker.
I tested this again just now and I realized that everything works just fine when importing the F7 icon components now. I must've made a mistake while testing the 5.0.5 version the first time. I'll implement a fix for this now.
from sanity-plugin-icon-picker.
Related Issues (20)
- Icons are a bit cut of HOT 2
- DeprecationWarning: Invalid `main` field HOT 4
- Sanity V3 Upgrade? HOT 9
- Output format for react does not work in V3 HOT 4
- Deploying NextJS embedded studio breaks studio HOT 1
- Don't show tabs if only one provider is set
- Global css cannot be imported from within node_modules error HOT 5
- Large front-end bundles? HOT 17
- Stored SVG is not available in GraphQL HOT 5
- Building Next.js app with nested Sanity Studio is broken by the plugin HOT 2
- Application error: a client-side exception has occurred (see the browser console for more information). HOT 2
- Preview module does not work with custom providers HOT 2
- Using custom provider breaks sanity codegen HOT 2
- Error on production and built but not on development HOT 1
- Support for font awesome 6 HOT 1
- Read-only field HOT 7
- Tree shaking is not possible HOT 4
- Icons are cut off in MenuButton
- Translate the strings
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 sanity-plugin-icon-picker.