title: How to inline multiple SVGs with React using Webpack?
body: <p>Let's say I have a dozen or more SVGs that I want to inline in my React app. Right now, I'm using <a href="https://www.npmjs.com/package/svg-react-loader" rel="noreferrer">svg-react-loader</a> to import them like this.</p>
  
  <pre><code>import Svg1 from "!babel!svg-react!../../images/sdg1.svg";
  import Svg2 from "!babel!svg-react!../../images/sdg2.svg";
  import Svg3 from "!babel!svg-react!../../images/sdg3.svg";
  import Svg4 from "!babel!svg-react!../../images/sdg4.svg";
  </code></pre>
  
  <p>...and so on. I need to set event handlers on each of them and hover events. Moreover, when one of them is selected I want to change its opacity.</p>
  
  <p>After several hours and as many failed experiments, the only thing I've tried that works is to render them all inside a parent component like this.</p>
  
  <pre><code>const Icon = React.createClass({
  
      //Callback that updates the state of a parent component
      clickHandler() {
          this.props.handler(this.props.svg) 
      }
  
      render() {
  
          const icons = [
              &lt;Svg1 className="svg1" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} /&gt;
              &lt;Svg2 className="svg2" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} /&gt;
              &lt;Svg3 className="svg3" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} /&gt;
              &lt;Svg4 className="svg4" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} /&gt;
          ];
  
          return (
              &lt;div className="icon" onClick={this.clickHandler}&gt;
                  {icons[this.props.svg]}
              &lt;/div&gt;
          );
      }    
  });
  </code></pre>
  
  <p>Again, this works but I'm sure this isn't the way React intended. Is there a way to iterate over SVG components created this way to assign them properties? </p>