Lucide Svelte (javascript / icons)

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

Closed Issues:

Closed: https://github.com/lucide-icons/lucide/issues/806 Closed: https://github.com/lucide-icons/lucide/issues/515