title: React trying to map a value to an SVG so an icon is dynamically rendered
body: <p>I've got a React component that returns a <code>country-code</code> - I want to build on that so that I can pass that country-code into another component and map through the values, returning the appropiate icon based on the country code. I really am starting from scratch and don't really know how to approach it so any suggestions on best options would be really appreciated.</p>
  <p>The value so far is like so:
  <code>key={option.code}</code> // may output something like &quot;AFN&quot;</p>
  <pre><code>import Afghanistan from &quot;./CountryFlags/Afghanistan.svg&quot;;
  import Albania from &quot;./CountryFlags/Albania.svg&quot;
  
  const countryList = [
    {
      countryCode: &quot;AFN&quot;,
      name: &quot;afghanistan&quot;,
      icon: Afghanistan
    },
    {
      countryCode: &quot;ALL&quot;, 
      name: &quot;albania&quot;,
      icon: Albania
    },
  ];
  
  export default countryList;
  </code></pre>