Merge pull request #405 from primer/tree-shaking

Enable tree-shaking in React package

CHANGELOG.md

@@ -21,6 +21,8 @@
 
 - All icon component names now include `Icon` at the end (e.g. `Alert` → `AlertIcon`).
 
+- In order to enable tree-shaking, we removed the `iconsByName` and `getIconByName` exports.
+
 - `Octicon` no longer accepts `width` or `height` props. Use the `size` prop instead. In cases where the width and height of an icon are not equal (e.g. logos), the height will be set to the value of the `size` prop and the `width` will be scaled proportionally.
 
 - We renamed the `ariaLabel` prop to `aria-label` to be consistent with React: https://reactjs.org/docs/accessibility.html#wai-aria

docs/content/packages/react.mdx

@@ -39,53 +39,6 @@ If you were to compile this example with a tool that supports [tree-shaking][]
 (such as Webpack, Rollup, or Parcel) the resulting bundle would only include
 the "zap" and "beaker" icons.
 
-### All icons
-If you don't mind your bundle being huge or you need to be able to render
-arbitrarily named icons at runtime, you can import either of the following
-named exports:
-
-#### `getIconByName()`
-The `getIconByName` export is a function that takes a lowercase octicon name
-(such as `arrow-right`) and returns the corresponding icon component. Using this
-helper, it's possible to create an component that takes a `name` prop and
-resolves it to the right icon:
-
-```jsx
-import React from 'react'
-import {getIconByName} from '@primer/octicons-v2-react'
-
-export default function OcticonByName({name, ...props}) {
-  const Icon = getIconByName(name)
-  return <Icon {...props} />
-}
-```
-
-#### `iconsByName`
-The `iconsByName` export is an object that maps keys (such as `arrow-right` or
-`zap`) to component functions, which you can use to generate listings of all
-the octicons:
-
-```jsx
-import React from 'react'
-import {iconsByName} from '@primer/octicons-v2-react'
-
-export default function OcticonsList() {
-  return (
-    <ul>
-      {Object.keys(iconsByName).map(key => {
-        const Icon = iconsByName[key]
-        return (
-          <li key={key}>
-            <tt>{key}</tt>
-            <Icon />
-          </li>
-        )
-      })}
-    </ul>
-  )
-}
-```
-
 ### Vertical alignment
 By default the octicons have `vertical-align: text-bottom;` applied as inline
 styles. You can change the alignment via the `verticalAlign` prop, which can be

lib/octicons_react/package.json

@@ -7,6 +7,7 @@
   "license": "MIT",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
+  "sideEffects": false,
   "types": "dist/index.d.ts",
   "repository": "primer/octicons",
   "scripts": {

lib/octicons_react/script/build.js

@@ -45,17 +45,7 @@ import getSvgProps from '../get-svg-props'
 
 ${icons.map(({code}) => code).join('\n')}
 
-const iconsByName = {
-  ${icons.map(({key, name}) => `'${key}': ${name}`).join(',\n  ')}
-}
-
-function getIconByName(name) {
-  return iconsByName[name]
-}
-
 export {
-  getIconByName,
-  iconsByName,
   ${icons.map(({name}) => name).join(',\n  ')}
 }`
   return fse.writeFile(file, code, 'utf8').then(() => {
@@ -82,20 +72,8 @@ type Icon = React.FC<IconProps>
 
 ${icons.map(({name}) => `declare const ${name}: Icon`).join('\n')}
 
-type iconsByName = {
-  ${icons.map(({key}) => `'${key}': Icon`).join(',\n  ')}
-}
-declare const iconsByName: iconsByName
-
-declare function getIconByName<T extends keyof iconsByName>(
-  name: T
-): iconsByName[T];
-declare function getIconByName(name: string): Icon | undefined
-
 export {
   Icon,
-  getIconByName,
-  iconsByName,
   ${icons.map(({name}) => name).join(',\n  ')}
 }`
   return fse.writeFile(file, code, 'utf8').then(() => {

lib/octicons_react/ts-tests/index.tsx

@@ -1,35 +1,5 @@
 import * as React from 'react'
-import Octicon, {getIconByName, iconsByName, MarkGithubIcon, OcticonProps, PlusIcon, RepoIcon} from '../src'
-
-type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
-
-function OcticonByName({name, ...props}: {name: keyof iconsByName} & Omit<OcticonProps, 'icon'>): React.ReactElement {
-  return <Octicon {...props} icon={getIconByName(name)} />
-}
-
-function TestOcticonsByName(): React.ReactElement {
-  return <OcticonByName name="x" />
-}
-
-// Unfortunately, `Object.keys` returns `string[]` unconditionally;
-// see https://github.com/Microsoft/TypeScript/pull/13971 &
-// https://github.com/Microsoft/TypeScript/issues/12870 for details.
-function keys<T>(obj: T): (keyof T)[] {
-  return Object.keys(obj) as (keyof T)[]
-}
-
-function OcticonsList() {
-  return (
-    <ul>
-      {keys(iconsByName).map(key => (
-        <li key={key}>
-          <code>{key}</code>
-          <Octicon icon={iconsByName[key]} />
-        </li>
-      ))}
-    </ul>
-  )
-}
+import Octicon, {MarkGithubIcon, PlusIcon, RepoIcon} from '../src'
 
 function TestOcticons() {
   return (