title: unable to display svg's from local folder using React js
body: <p>what i need : I am trying to display svg from external folder and that folder contains some 50 files and </p>
  
  <pre><code>public folder
    |-images
          -| 50 svgs
  </code></pre>
  
  <p>in app.js </p>
  
  <p>i am trying to display the image </p>
  
  <pre><code>import React from 'react';
  import './App.css';
  import svgs from "../public/svgfolder/0.svg"
  class App extends React.Component{
  
     render(){
       return(
         &lt;div&gt;
           &lt;img src={svgs} alt="test"&gt;&lt;/img&gt;
         &lt;/div&gt;
       )
     }
  }
  
  export default App;
  </code></pre>
  
  <p>i am getting below error</p>
  
  <blockquote>
    <p>Module not found: You attempted to import ../public/svgfolder/0.svg
    which falls outside of the project src/ directory. Relative imports
    outside of src/ are not supported.</p>
  </blockquote>
  
  <p>here i need  3 things</p>
  
  <ol>
  <li>How can we display 50 svgs dynamically in react ?</li>
  <li>some people are suggesting to make change in the web pack so is it right approach i mean will it work in production also ?</li>
  <li>do we have to use public folder or any other folder ?</li>
  <li>React support svg's  ?</li>
  </ol>
  
  <p>Note : if i call svg through url <code>&lt;img src={"https://s.cdpn.io/3/kiwi.svg"}/&gt;</code>,</p>
  
  <p>it is working and if the same using local file it is not </p>
  
  <p>and if u put the svg single file <strong>src</strong> folder then a single file can be able to display</p>