We added support for aliases imports for the following package:
- lucide-react
- lucide-react-native
- lucide-preact
- lucide-solid
- lucide-svelte
- lucide-vue
- lucide-vue-next
Using Aliases Imports
It's now possible to import icons as:
lucide-react
example :
// These all point to the same icon component
import { Home } from 'lucide-react';
import { HomeIcon } from 'lucide-react';
import { LucideHome } from 'lucide-react';
const Component = () => {
return (
<Home />
<HomeIcon />
<LucideHome />
)
}
This only works for ESModules imports to keep tree-shaking possible.
All the other imports are still working the same.
Breaking Changes
Affecting: lucide-react
and lucide-react-native
.
If you're only using the icons imports then you're fine.
createReactComponent
import
import { createReactComponent } from 'lucide-react'
Is changed to
import { createLucideIcon } from 'lucide-react'
Solid Start
lucide-solid
is now working in Solid Start