title: I want to component that can change the icon to be displayed according to the name of the icon
body: <p>I am using typescript, react and chakra ui.<br />
  We want to display the Icon component of Twitter.ts when we pass &quot;twitter&quot; to the IconProps of the Icon component, and display the LinkedIn component when we pass &quot;LinkedIn&quot;.<br />
  I want to change the icon to be displayed depending on the name passed to the Icon component.</p>
  <p>index.tsx</p>
  <pre><code>&lt;Icon icon=&quot;twitter&quot;/&gt;
  </code></pre>
  <p>Icon.ts</p>
  <pre><code>
  type Props = {
  icon: string;
    fontSize?: string;
  };
  
  export const Icon: React.FunctionComponent&lt;Props&gt; = ({ icon,ontSize }) =&gt; (
  return ()
  );
  </code></pre>
  <p>Facebook.ts</p>
  <pre><code>import { Icon } from '@chakra-ui/react';
  import React from 'react';
  
  type Props = {
    fontSize?: string;
  };
  
  export const FacebookIcon: React.FunctionComponent&lt;Props&gt; = ({ fontSize }) =&gt; (
    &lt;Icon fontSize={fontSize}&gt;
      &lt;path
        fillRule=&quot;evenodd&quot;
        clipRule=&quot;evenodd&quot;
        d=&quot;&quot;//  It's a long story, so I'll skip it.
      /&gt;
    &lt;/Icon&gt;
  );
  ```
  </code></pre>
  <p>Linkedin.ts</p>
  <pre><code>    import { Icon } from '@chakra-ui/react';
      import React from 'react';
  
      type Props = {
        fontSize?: string;
      };
      
      export const LinkedinIcon: React.FunctionComponent&lt;Props&gt; = ({ fontSize }) =&gt; (
        &lt;Icon fontSize={fontSize}&gt;
          &lt;path
            fillRule=&quot;evenodd&quot;
            clipRule=&quot;evenodd&quot;
            d=&quot;&quot;//  It's a long story, so I'll skip it.
          /&gt;
        &lt;/Icon&gt;
      );
  </code></pre>
  <p>Twitter.ts</p>
  <pre><code>    import { Icon } from '@chakra-ui/react';
      import React from 'react';
  
      type Props = {
        fontSize?: string;
      };
      
      export const TwitterIcon: React.FunctionComponent&lt;Props&gt; = ({ fontSize }) =&gt; (
        &lt;Icon fontSize={fontSize}&gt;
          &lt;path
            fillRule=&quot;evenodd&quot;
            clipRule=&quot;evenodd&quot;
            d=&quot;&quot;//  It's a long story, so I'll skip it.
            fill=&quot;#525E6D&quot;
          /&gt;
        &lt;/Icon&gt;
      );
  
  </code></pre>