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 :_
jsx
// 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](https://github.com/solidjs/solid-start)
Closed Issues:
Closed: https://github.com/lucide-icons/lucide/issues/806
Closed: https://github.com/lucide-icons/lucide/issues/515