How to use SVG file like <img src={require('path/to/foo.svg')} />

[feihe08]

Hi! Recently， I started using storybook as my react ui environment. My project was created with create-react-app. In my project, the SVG is imported and used like this:

import Cat from './cat.svg'
...
<img src={Cat} />
...

but when I add some webpack config in .storyboook/webpack.config.js.

const path = require('path')

module.exports = {
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
          },
          {
            test: /\.(png|jpg|gif|svg)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192
                },
                include: path.resolve(__dirname, '../')
              }
            ]
          },
          {
            exclude: [/\.js$/, /\.html$/, /\.json$/],
            use: [
              {
                loader: 'file-loader',
                options: {},
                include: path.resolve(__dirname, '../')
              }
            ]
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
}

It does't work well. the console has an error:
" http://localhost:9001/function SVG() { _classCallCheck(this, SVG); return _possibleConstructorReturn(this, (SVG.__proto__ || Object.getPrototypeOf(SVG)).apply(this, arguments)); }" 404 not found.

so, can someone could help me with this? what config I should add to make it work well?

[Hypnosphi]

You probably need full control mode

[feihe08]

@Hypnosphi ,Thank you! I found the error was caused by my carelessness. I forget to reset the server after changing the web pack.config.js. After I reseted the server, everything work well. I am sorry for my carelessness.