[Bug]: Next.js - Prop className did not match.

[bombillazo]

Describe the bug

When using this lbrary and adding a class name to icons using the IconContext.Provider:

 <IconContext.Provider value={{ className: 'anticon' }}>

We get the following error on page load:

Warning: Prop `className` did not match. Server: "ant-menu-item-icon" Client: "anticon ant-menu-item-icon"

Expected behavior

No error is given.

Minimal sample repository URL

N/A

Steps To Reproduce

1. Pass a custom className to the IconContest.
2. Load a page.

Package version

v4.11.0

Relevant log output

Warning: Prop `className` did not match. Server: "ant-menu-item-icon" Client: "anticon ant-menu-item-icon"

Additional context

No response

[ianujvarshney]

Dear ,

I'm Anuj Varshney, experienced in resolving such issues efficiently. Kindly assign it to me. I'll work diligently and keep you updated. Excited to contribute.

[Hachikoi-the-creator]

found a work around for this, in typescript it wont even allow the provider to exist, so just added a span whit the classes I need

<span className="text-red-500 text-9xl">
    <FaHotTub />
</span>

[bombillazo]

found a work around for this, in typescript it wont even allow the provider to exist, so just added a span whit the classes I need

<span className="text-red-500 text-9xl">
    <FaHotTub />
</span>

Yeah.... Adding this to every instance of an icon component is not practical and pretty much defeats the purpose of the className prop and icon context 😔

[Hachikoi-the-creator]

@bombillazo I know, was pretty confused when I couldn't even use the IconContext, hope this helps someone tho
since this lib doesn´t seem to update anymore :c

[bombillazo]

@Hachikoi-the-creator I have a solution for this, though 😄

@kamijin-fanta Remember my PR #720 ? This issue is solved by allowing users to wrap icons with custom elements (like span in this case) to solve the issue caused by Next.js + React Icons. So it seems we have another use case for the PR.

[loczek]

Adding react-icons to transpile packages inside next.config.js seems to fix the issue.

const nextConfig = {
  transpilePackages: ["react-icons"]
};

[bombillazo]

Thanks @loczek , that worked!