lucide icon indicating copy to clipboard operation
lucide copied to clipboard

Readme is not accurate on: "Lucide react exports a dynamic import map dynamicIconImports"

Open kyr0 opened this issue 1 year ago • 0 comments

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

tested 0.108.0 to latest

Browser

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

Operating system

  • [ ] Windows
  • [ ] Linux
  • [X] macOS
  • [ ] Other/not relevant

Description

I'm was looking for the export as described by the readme, but dynamicIconImports was nowhere to be found in that package (as by the code example in the readme).

I checked a lot of versions between 0.108.0 and 0.259.0 (latest).

Bildschirmfoto 2023-12-14 um 12 31 42

In consequence (because of the lacking export), the type of dynamicIconImports is unknown, and therefore the code example is incorrect:

Bildschirmfoto 2023-12-14 um 12 32 32

However, later I tried with the code below (that is in context of NextJS); this code example states, that the following import should be used:

import dynamicIconImports from 'lucide-react/dynamicIconImports';

This works, but I'm not using NextJS, but Astro.

The section above, which code is incorrect, should be changed to reflect the import that actually works. However, wether this would work for client-side only builds, however, is questionable;

Also, there is not only NextJS where it will most probably work just fine. In fact, alot of SSR/SSG tooling such as Astro or Gatsby would work fine with dynamic import bundling using Vite, SWC, esbuild etc. bundlers. Therefore, it might be wise to create a more generic section explaining dynamic imports using the generated import map.

Steps to reproduce

Just install lucide-react and copy paste the code example from the readme: https://www.npmjs.com/package/lucide-react#with-dynamic-imports

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

kyr0 avatar Dec 14 '23 04:12 kyr0