No tree shaking

[leymytel]

Hello everyone! Is there any way to introduce tree-shaking? I'm not using the import * as Icon syntax and I'm still getting the whole library in the bundle.

[Joeao]

Can confirm that I'm experiencing this too. Thanks for bringing it up as I hadn't noticed until now.

One way to resolve this is to import each icon directly. E.g.

// Javascript
import Presentation from "phosphor-react-native/lib/commonjs/icons/Presentation";

// Typescript
import Presentation from "phosphor-react-native/src/icons/Presentation";

I've only tested the Typescript method and it works well.

This is similar to how MUI recommends importing their icons for easiest bundle size management. Though their paths are a bit more direct.

[leymytel]

Thank you so much @Joeao! I tried the Typescript method and it works pretty well.

[kalyncoose]

@leymytel Hey, could you share how you were able to view the library bundle like in your screenshot above?

[jhhayashi]

@kalyncoose https://github.com/IjzerenHein/react-native-bundle-visualizer

[kalyncoose]

@jhhayashi Wow thank you so much! I kept looking up bundle visualizer and couldn't find it, didn't realize it was React Native specific but because of metro that makes sense, thanks again!!!

[cosmos-redshift]

Hey, I use phosphor icons in all my projects. The tree-shaking issue is a pain when it's about developer experience. Do you have any idea how I can automate converting named imports in the suggested way above?

import {
  AddressBook,
  ChartLine,
  CurrencyDollar,
} from 'phosphor-react-native'

to:

import AddressBook from 'phosphor-react-native/src/icons/AddressBook'
import ChartLine from 'phosphor-react-native/src/icons/ChartLine'
import CurrencyDollar from 'phosphor-react-native/src/icons/CurrencyDollar'

But the same thing applies when you import IconProps or IconContext

import { IconProps, IconContext } from 'phosphor-react-native'

to:

import { IconContext, IconProps } from 'phosphor-react-native/src/lib/index'

I also started working on the VS Code extension (my first attempt so it doesn't work yet...): https://github.com/cosmos-redshift/phosphor-shaker which I'd like to trigger on save to rewrite phosphor-icons imports.

Let me know if there's any progress on fixing tree shaking for this package.

Cheers 🍻