Import Icon as a separate module

[RobertSasak]

Package

• lucide
• lucide-angular
• lucide-flutter
• lucide-preact
• lucide-react
• lucide-react-native
• lucide-solid
• lucide-svelte
• lucide-vue
• lucide-vue-next
• Figma plugin
• all JS packages
• site

Description

Problem

I would like to reduce overall bundle size. React native(metro) does not support tree shaking so it is up to developer to only import modules that are needed. There is no app that need all icons and only a few are needed at the time.

Solution

Export all icons as a separate sub modules of the lucide-react-native package.

Workaround

It is currently possible to import separate icons from dist subfolder.

import HelpCircleIcon from 'lucide-react-native/dist/esm/icons/help-circle'
import QrCodeIcon from 'lucide-react-native/dist/esm/icons/qr-code'

However those do not have a type and typescript throws error

Could not find a declaration file for module 'lucide-react-native/dist/esm/icons/arrow-left'. 

Use cases

Import only icons that are actually needed.

import HelpCircleIcon from 'lucide-react-native/dist/esm/icons/help-circle'
import QrCodeIcon from 'lucide-react-native/dist/esm/icons/qr-code'

Checklist

• I have searched the existing issues to make sure this bug has not already been reported.

[RobertSasak]

Here is a type definition file to fix a typescript error.

// types/lucide-react-native.d.ts
declare module 'lucide-react-native/dist/esm/icons/*' {
  import { LucideIcon } from 'lucide-react-native'

  export = LucideIcon
}

[fmendez89]

Here is a type definition file to fix a typescript error.

// types/lucide-react-native.d.ts
declare module 'lucide-react-native/dist/esm/icons/*' {
  import { LucideIcon } from 'lucide-react-native'

  export = LucideIcon
}

Hi @RobertSasak ,
When I import any icon, TS error arise. For example for PlusCircleIcon.

'PlusCircleIcon' only refers to a type, but is being used as a value here.ts(2693)

Do I need to import all icons on the type definition? Like this?

// types/lucide-react-native.d.ts
declare module 'lucide-react-native/dist/esm/icons/*' {
  import { PlusCircleIcon } from 'lucide-react-native'

  export = PlusCircleIcon
}

Thanks

[RobertSasak]

I do not remember details but I updated the definition file to

declare module 'lucide-react-native/dist/esm/icons/*' {
  import { LucideIcon } from 'lucide-react-native'

  const icon: LucideIcon
  export default icon
}

And then in Icons.ts I import only Icons I need:

export { default as AlertCircleIcon } from 'lucide-react-native/dist/esm/icons/alert-circle'
export { default as ArrowLeftIcon } from 'lucide-react-native/dist/esm/icons/arrow-left'

Which I then refer in my app.

import { AlertCircleIcon, ArrowRightIcon } from './path/to/Icons'

[fmendez89]

I do not remember details but I updated the definition file to

declare module 'lucide-react-native/dist/esm/icons/*' {
  import { LucideIcon } from 'lucide-react-native'

  const icon: LucideIcon
  export default icon
}

And then in Icons.ts I import only Icons I need:

export { default as AlertCircleIcon } from 'lucide-react-native/dist/esm/icons/alert-circle'
export { default as ArrowLeftIcon } from 'lucide-react-native/dist/esm/icons/arrow-left'

Which I then refer in my app.

import { AlertCircleIcon, ArrowRightIcon } from './path/to/Icons'

Oh, nice, thanks for the update!

[avaziman]

I was able to automate it to replace the general import with the icon only import by adding this plugin to babel

[
        "babel-plugin-transform-imports",
        {
          "lucide-react-native": {
            transform: (name) =>
              `lucide-react-native/dist/cjs/icons/${name
                .replace(/Icon$/, "")
                .replace(/([a-z])([A-Z])/g, "$1-$2")
                .toLowerCase()}`,
            preventFullImport: true,
          },
        },
      ]