Enable tree-shaking in React package

[colebemis]

Problem

Using a single icon from @primer/octicons-v2-react adds about 130kb to the bundle size of an application—so tree-shaking is not happening:

File sizes after gzip:

  169.18 KB (+129.79 KB)  build/static/js/2.fc93e4a5.chunk.js
  771 B                   build/static/js/runtime-main.f8c5b4be.js
  653 B (+7 B)            build/static/js/main.ea532662.chunk.js
  547 B                   build/static/css/main.5f361e03.chunk.css

@dmarcey wrote a detailed description of the problem in this issue: #404

Solution

Adding "sideEffects": false to the package.json and removing the iconsByName and getIconByName exports seemed to fix the tree-shaking issue. I tested these changes in @dmarcey's tree-shaking-test repo and found that using one icon from @primer/octicons-v2-react only added 1.69kb to the bundle (verses 130kb before):

File sizes after gzip:

  41.08 KB (+1.69 KB)  build/static/js/2.220ad890.chunk.js
  771 B                build/static/js/runtime-main.f8c5b4be.js
  653 B (+7 B)         build/static/js/main.ea532662.chunk.js
  547 B                build/static/css/main.5f361e03.chunk.css

Risks

Removing iconsByName and getIconByName from the React package would be a breaking change. Consumers would no longer be able to render a list of all the icons or dynamically get an icon component by name. However, @smockle noticed that there is only a single code match for iconsByName in the entire GitHub org—and it’s from the deprecated package @githubprimer/octicons-react: https://github.com/search?q=org%3Agithub+iconsByName&type=Code. So maybe this breaking change wouldn't be disruptive.

Closes #404

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/octicons/mrcmjsqam
✅ Preview: https://octicons-git-tree-shaking.primer.now.sh

[emplums]

YAYY 🙌 Would love to test a release candidate in Primer Components before we merge but other than that I think this looks good!

[dmarcey]

I can do the same later tonight for Memex. Do you have a package version handy that I can test with?

[colebemis]

Do you have a package version handy that I can test with?

@primer/[email protected]

[dmarcey]

This is awesome, thanks for the quick turn-around @colebemis !!

I can confirm that when using this package we dropped back down to just a couple kb higher than we were before consuming @primer/octicons-v2-react - a pretty good indicator that tree-shaking is working as expected.