Using Lucide Icons removes all components from the DOM.
I have a simple task of just loading icons to a page in Solid Start.
src/routes/index.tsx
src/components/exotic/test
If I load the IconTest component, it will remove itself and the Counter from the DOM entirely. If I comment out the IconTest component, the button will reappear and is reactive.
The same thing happens if I load an Icon into the navbar, only it will not remove the Counter from the DOM but the Counter will no longer be reactive.
Is there a caveat to using icons that I'm overlooking here?
7 Replies
If you look at the network tab I'm guessing lucid is trying to import every single icon when you're just trying to import one
The solution is to import the icon from your node modules folder. There's some kind of bug with lucid icons with solidJS. I can give you an example tomorrow if you have trouble finding the icon in your node modules folder
Yeah I can't seem to import it even from there
But you're right, lucide is trying to import every icon for some reason
GitHub
Vite+Solid and lucide-solid, Loading failed for the module · Issue ...
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...
It turns out that uBlock origin was blocking my icons in dev
But they're still loading every icon ... 🤔
Like this: import
LoaderCircle from '../../../node_modules/lucide-solid/dist/source/icons/loader-circle.jsx'
weird I have ublock origin tooI receive a type error here:
Also doing it this way still imports all icons in the network tab.
are you importing icons from lucide-solid anywhere else?
and I noticed you have just as many
.,/
as me. Is that the correct path to your node modules?