Next.js embedded Studio: Global CSS cannot be imported from within node_modules. about sanity-plugin-icon-picker HOT 2 CLOSED

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:

• next-remove-imports
• next-global-css

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:

1. 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).
2. Filter out the problematic SVG icons and generate pure F7 SVG Icons instead of using the <\i> tag with the globally loaded css
3. 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)
4. 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.