Change icon import names to have a prefix e.g. <LucideCamera />

It’s not all the time I run into this issue but I often find myself having to use different icons or renaming components within React projects so that they don’t clash with the imports.

E.g. if I want to use <Login /> Lucide icon but I have a <Login /> functional component.

A suggestion would be to prefix the imports so <Camera /> would become <LcCamera /> or similar.

[ericfennis]

We have a plan to support aliases in all our packages that uses lucide icons as components. I was thinking to add an aliases.js file with all the icons aliases. and export them in the main index.ts. import { Camera } from "lucide-react"; or `import { CameraIcon } from “lucide-react”; will lead to the same icon file. This only will working nicely with ESModules.

If you want to have all the icons you can then still do import * as icons from "lucide-react/icons"; But importing icons this way is not recommended and bad practice if you are bundeling your application for browsers. This way of importing breaks the tree-shaking ability in bundlers. So your bundled app will include all 800+ icons.

[jakobsen]

Another way you could do it is to import as

import * as Lucide from "lucide-react";

and then render components as

<Lucide.Camera />

I think namespacing imports properly should be the responsibility of the app developer, not the library developer, and therefore disagree that this is something that needs a solution from Lucide’s or @ericfennis’ end.