title: Tree shakable icon component
body: <p>I am creating a custom design system on top of <a href="https://chakra-ui.com/" rel="nofollow noreferrer">ChakraUI</a> and bootstrap icons.</p>
  <p>Bootstrap icons contains 1000+ svg icons.<br />
  I created an abstract <code>Icon</code> component to have abstraction over the icon name, that seems IMO more convenient.</p>
  <p>However, I am not sure this module will be tree-shaked, and I can't figure out how to change the implementation to make it tree-shakable.</p>
  <h3>Icon.tsx</h3>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import * as bootstrapIcons from '@emotion-icons/bootstrap'
  
  // Union of all icon names: 'Alarm' | 'Circle' | 'Square' ...
  type IconNames = keyof typeof bootstrapIcons
  
  export const Icon: FC&lt;{name: IconNames}&gt; = ({name}) =&gt; {
    const Icon = bootstrapIcons[name]
  
    return (
      &lt;div&gt;
        &lt;Icon style={{...}} /&gt;
      &lt;/div&gt;
  
    )
  }
  </code></pre>
  <h3>App.tsx</h3>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import { Icon } from './Icon'
  
  const App = () =&gt; {
    return &lt;div&gt;
      &lt;Icon name=&quot;Alarm&quot; /&gt;
    &lt;/div&gt;
  }
  </code></pre>