S
SolidJS•3w ago
Jack Vane

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
import { Title } from "@solidjs/meta";
import Counter from "~/components/Counter";
import IconTest from "~/components/exotic/test";

export default function Home() {
return (
<main>
<Title>Hello World</Title>
<Counter />
<IconTest />
</main>
);
}
import { Title } from "@solidjs/meta";
import Counter from "~/components/Counter";
import IconTest from "~/components/exotic/test";

export default function Home() {
return (
<main>
<Title>Hello World</Title>
<Counter />
<IconTest />
</main>
);
}
src/components/exotic/test
import { MenuIcon } from "lucide-solid";

function IconTest() {
return (
<div>
<MenuIcon size={24} strokeWidth={1} />
</div>
);
}

export default IconTest;
import { MenuIcon } from "lucide-solid";

function IconTest() {
return (
<div>
<MenuIcon size={24} strokeWidth={1} />
</div>
);
}

export default IconTest;
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
Grahf
Grahf•3w ago
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
Jack Vane
Jack Vane•3w ago
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
Jack Vane
Jack Vane•3w ago
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...
Jack Vane
Jack Vane•3w ago
It turns out that uBlock origin was blocking my icons in dev But they're still loading every icon ... 🤔
Grahf
Grahf•3w ago
Like this: import LoaderCircle from '../../../node_modules/lucide-solid/dist/source/icons/loader-circle.jsx' weird I have ublock origin too
Jack Vane
Jack Vane•3w ago
I receive a type error here:
Could not find a declaration file for module '../../../../node_modules/lucide-solid/dist/source/icons/menu.jsx'. '/Users/jackienguyen/Code/vane.works/vaneworks/node_modules/lucide-solid/dist/source/icons/menu.jsx' implicitly has an 'any' type.ts(7016)
Could not find a declaration file for module '../../../../node_modules/lucide-solid/dist/source/icons/menu.jsx'. '/Users/jackienguyen/Code/vane.works/vaneworks/node_modules/lucide-solid/dist/source/icons/menu.jsx' implicitly has an 'any' type.ts(7016)
Also doing it this way still imports all icons in the network tab.
No description
Grahf
Grahf•3w ago
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?