0.378.0 introduced a hydration bug that can be seen when using nextjs or remix

[roger-tbg]

Package

• [ ] lucide
• [ ] lucide-angular
• [ ] lucide-flutter
• [ ] lucide-preact
• [X] lucide-react
• [ ] lucide-react-native
• [ ] lucide-solid
• [ ] lucide-svelte
• [ ] lucide-vue
• [ ] lucide-vue-next
• [ ] Figma plugin
• [ ] source/main
• [ ] other/not relevant

Version

0.378.0

Can you reproduce this in the latest version?

• [X] Yes
• [ ] No

Browser

• [X] Chrome/Chromium
• [ ] Firefox
• [ ] Safari
• [ ] Edge
• [ ] iOS Safari
• [ ] Opera
• [ ] Other/not relevant

Operating system

• [ ] Windows
• [ ] Linux
• [X] macOS
• [ ] ChromeOS
• [ ] iOS
• [ ] Android
• [ ] Other/not relevant

Description

when updating from 0.372.0 to 0.378.0 i'm starting to see these in the console using ANY lucide icons that do not provide an extra className:

Steps to reproduce

Using nextjs or remix, just add any icon:

this will result in: Warning: Prop className did not match. Server: "lucide lucide-line-chart " Client: "lucide lucide-line-chart"

(note the extra space)

downgrading to 0.372.0 made this go away.

Checklist

• [X] I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)

[benjick]

Same issue here with 0.403.0

[williamlmao]

Same issue here.

[ericfennis]

Is fixed by #2522