React hydration using prerendering fails due to mismatch in icon classnames

[Mai-Lapyst]

Description

When using the react icon package (@tabler/icons-react) with an prerendered react app (i.e. using tools like react-snap or @bithero/webapp-prerender (disclaimer: the later is written by me)), it can lead to mismatched generation when hydrating the client:

Prop `className` did not match. Server: "tabler-icon tabler-icon-menu-2" Client: "tabler-icon tabler-icon-menu-2 "

The bug is following line:

tabler-icons/packages/icons-react/src/createReactComponent.ts

Line 23 in 50b5d04

className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(' '),

If the className function argument is empty (or null), then the resulting string will have a trailing whitespace. This causes errors since browsers typically discard any trailing whitespaces in class attributes, which is why prerendering fails (most techniques here utilize an headless chrome to "prerender" the html and save it then inside an file).

A fix could be to either .filter(Boolean) before the call to join, or .trim() afterwards.

Package

• @tabler/icons
• @tabler/icons-eps
• @tabler/icons-pdf
• @tabler/icons-png
• @tabler/icons-webfont
• @tabler/icons-sprite
• @tabler/icons-preact
• @tabler/icons-react
• @tabler/icons-react-native
• @tabler/icons-solid
• @tabler/icons-svelte
• @tabler/icons-vue
• Figma plugin
• source/main
• other/not relevant

Version

3.34.1

Browser

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

Operating system

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

Steps to reproduce

1. Use an Icon in your react app (i.e. <IconMenu2/>)
2. Build the app like normal (i.e. via vite)
3. Use an prerendering tool (i.e. react-snap or by simply opening the site in chrome and saving the resulting html)
4. Look for the class attribute on the <svg> of the icon: it should have no trailing whitespace.

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