title: Storybook loads .svg with file-loader instead to load it as React component
body: <p>So what I am trying to have, is to import any <code>.svg</code> file as React component to be used as <code>&lt;SomeIcon /&gt;</code> instead of this I always get path to the file to be used like <code>&lt;img src={pathToIcon} /&gt;</code></p>
  <p>What I was trying to do was to add webpack config file to <code>.storybook</code> folder (or add <code>webpackFinal</code> to <code>main.js</code>):</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = ({ config }) =&gt; {
   config.module.rules.push({
     test: /\.svg$/,
     exclude: /node_modules/,
     include: /assets/,
     use: [
       {
         loader: &quot;@svgr/webpack&quot;,
         options: {
           icon: true,
         },
       },
       //   {
       //     loader: &quot;babel-loader&quot;,
       //   },
       //   {
       //     loader: &quot;react-svg-loader&quot;,
       //     options: {
       //       jsx: true,
       //     },
       //   },
     ],
   });
  
   return config;
  };
  
  </code></pre>
  <p>Both versions simply does not work (not commented loader, and commented loaders) and I always get the path to <code>.svg</code> like the loader does not affect <code>.svg</code>s at all.</p>
  <p>I am lack of ideas here and can't find any info how to do this.</p>