How to use with Next.js ?

[iamyuu]

I'm trying to use it with Next.js following the directions from the Configuration section (Webpack and React) and what I got:

maybe I missing something 🤔, check out my repo (webpack config)

[Knogobert]

Getting the same issue with unplugin-icons@0.12.18 unfortunately. Almost identical context as @iamyuu webpack config. Bumping for visibility.

[enpitsuLin]

Also same issue and I find one #46

after reading , still have no idea how to solve this

[leosuncin]

Thanks to @enpitsuLin 's comment, I managed to make it works, you will need to:

• Set the following config into next.config.js:

module.exports = {
  reactStrictMode: true,
  webpack(config) {
    config.plugins.push(
      require('unplugin-icons/webpack')({
        compiler: 'jsx',
        jsx: 'react',
        extension: 'jsx',
      }),
    );

    return config;
  },
};

• Add .jsx to every icon you import, in order, next.js knows how to load the icon

import IconAccessibility from "~icons/carbon/accessibility.jsx";
import IconAccountBox from "~icons/mdi/account-box.jsx";

I not sure whether this is a desired behavior or it should be changed, but this is how it work with next.js

[iamyuu]

Ah, we just need to add the extension (.jsx), check this commit https://github.com/iamyuu/nextjs-unplugin-icons-repro/commit/a1a62f766931d6629e4e609b3dc96e55569d0d79

and voila

[Knogobert]

Had to update from next@10 to next@12 for it to work. Now it runs nicely when using .jsx appended to the imported icons as @leosuncin did above. Thanks for the repo @iamyuu, that helped finding out why.

[HassanZahirnia]

Do you guys also know how to make the Auto Importing feature work with Next.js ? Or is it not technically possible ?

[Knogobert]

Do you guys also know how to make the Auto Importing feature work with Next.js ? Or is it not technically possible ?

Haven’t tried myself yet, but I think it has something to do with getting the icons for SSR during build-time being quite tricky. Saw some relevant thoughts on it in Anthony's discord in #unplugin-icons

Probably not the best way to paste this here, but at least you can see it without discord:

Hope it nudges you in the right direction. Please tell us if it worked or not and what you did 😃