NextJs 14 className hydration bug.

[nandy1990]

Package

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

Version

0.446.0

Can you reproduce this in the latest version?

• Yes
• No

Browser

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

Operating system

• Windows
• Linux
• macOS
• ChromeOS
• iOS
• Android
• Other/not relevant

Description

When using "use client" className differs by trailing whitespace between server and client.
Inside off createLucideIcon.js className gets joined together by following line 23:

className: ["lucide", lucide-${toKebabCase(iconName)}, className].join(" ")

so if className is empty you end up having a trailing space.

Console output in browser:

Warning: Prop className did not match. Server: "lucide lucide-euro " Client: "lucide lucide-euro"
at svg...

Steps to reproduce

Any file with "use client" and rendering any icon without className specified leads to this warning/error

Checklist

• 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.)

[bsimpson888]

Hello together, I face exactly the same bug.
By trimming the resulting className string, the error is gone.
Could someone please add the .trim() after the .join(" ") to this line.