Improve tree shaking friendliness

[shawnbot]

@josh and I discussed some of the more nuanced ways that we might be able to make @github/octicons-react more friendly to tree-shaking. One thing we could try is separating out the iconsByName and getIconByName() symbols in a separate file, which would exclude the key/component mapping from the bundle altogether, making it possible for uglify to remove the unused components as dead code.

[shawnbot]

Another option would be to put each component into its own file so that folks using tools that don't properly tree-shake or remove dead code get use only the icons they need:

import Octicon from '@primer/octicons'
// by key
import GitHub from '@primer/octicons/mark-github'
// or by generated class name?
import GitHub from '@primer/octicons/MarkGithub'

[shawnbot]

It sounds from this comment like webpack's problem is tree-shaking at the module level, as opposed to the file level; and that the solution is to ship each icon class as a separate file and re-export those from dist/index.esm.js:

// dist/icons/X.js
export default function X() { /* ... */ }

// dist/index.js
export {default as X} from './icons/X'

[Daniel15]

Just noticed today that adding a single Octicons icon to my app increases its bundle size by 68 KB :/

Are there any plans to support tree shaking?

[colebemis]

@primer/octicons-react should now be tree-shakeable 👍