title: Use index.js to import multiple image assets in React
body: <p>I have been using a pattern of collecting component files for export with <code>index.js</code> files placed in directories, for example:</p>
  
  <pre><code>// index.js file in /components directory
  export { Splash } from './Splash'
  export { Portfolio } from './Porfolio'
  export { Contact } from './Contact'
  </code></pre>
  
  <p>In <code>Layout.js</code> (located in root directory) I can neatly import with one call:</p>
  
  <pre><code>import { Splash, Portfolio, Contact } from '.'
  </code></pre>
  
  <p>I use this pattern a lot as I structure components across directories and sub-directories.</p>
  
  <p>My specific question is to ask if there is any way to extend this pattern to image assets collected in <code>src/assets/img</code>?  Can I place an <code>index.js</code> file in my images directory and to be able to call groups of images to a component?</p>
  
  <pre><code>//index.js in /src/assets/img directory
  export { Img01 } from './img-01.png'
  export { Img02 } from './img-02.jpg'
  export { Img03 } from './img-03.svg'
  
  //Call in Component.js
  import { Img01, Img02, Img03 } from '../assets/img'
  </code></pre>
  
  <p>I think this should be achievable, but I can't figure out the correct syntax or modifications required to this pattern.  Any code samples or recommendations for better practices are appreciated.  Thanks in advance!</p>