Breaking changes between lucide-static@307 and lucide-static@308+ (package moved to ESM)

[MangelMaxime]

Package

• lucide
• lucide-angular
• lucide-flutter
• lucide-preact
• lucide-react
• lucide-react-native
• lucide-solid
• lucide-svelte
• lucide-vue
• lucide-vue-next
• Figma plugin
• all JS packages
• site
• lucide-static (added it myself because it seems missing in the list)

Description

Hello,

I am not sure where to report this feedback but after upgrading lucide-static to the latest version I discovered that with the move to ESM lucide-static received a breaking change.

Indeed, before the ESM move the names of the exported icons variable where using camelCase however now they are using PascalCase.

This created subtitle bug when someone is doing something like:

import lucideIcons from "lucide-static";
const iconName = "home"; // Coming from an argument in the real code
const lucideIcon : string = lucideIcons[iconName];

Note

It would be a must have if the variable name stay stable over time to avoid hard to debug bug. Or perhaps expose both camelCase and PascalCase names as an alias of each others for compatibility.

Another things that changed with the move to ESM is that now the icons strings have some additional whitespaces around the actual <svg> tags.

// Before
module.exports = `<svg
  class="lucide lucide-a-arrow-down"
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M3.5 13h6" />
  <path d="m2 16 4.5-9 4.5 9" />
  <path d="M18 7v9" />
  <path d="m14 12 4 4 4-4" />
</svg>`;

// After
const AArrowDown = `
<svg
  class="lucide lucide-a-arrow-down"
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M3.5 13h6" />
  <path d="m2 16 4.5-9 4.5 9" />
  <path d="M18 7v9" />
  <path d="m14 12 4 4 4-4" />
</svg>`;

This is a subtle changes but when passing that string to SVG.js it seems to be enough to break it. A workaround is to trim the string before passing it to SVG.js.

Note

This could perhaps be considered a bug in SVG.js I am not sure what their position is on this subject.

These changes happened between:

• lucide-static@307
• lucide-static@308

Use cases

I am creating an eleventy plugin and providing a filter to user for bundling lucide-icons directly in the generated HTML (making load time faster).

And because of that, I am working with strings where the user if providing the name of the icon. This means that if the icon variable change casing then the plugin is broken as lucideIcons["home"] is different from lucideIcons["Home"].

Checklist

• I have searched the existing issues to make sure this bug has not already been reported.