Rename file to JSX before passing it to the next loader

[fregante]

Thank you for this loader! It seems to work but some loaders won't recognize a JSX file with an SVG extension and end up not parsing it (example: microsoft/TypeScript#10939)

Would it be possible for this loader to rename the file from .svg to .jsx so that loaders down the line automatically recognize it correctly?

[frenzzy]

You can apply as many loaders as you need per a specific file extension like this:

// webpack.config.js
{
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          { loader: 'third-loader' }, // apply this loader after:
          { loader: 'seond-loader' }, // apply this loader after:
          { loader: 'svg-to-jsx-loader' }
        ]
      }
    ]
  }
}

Also I suggest to use babel-plugin-inline-react-svg or similar solution instead of webpack loaders.
(I am considering to deprecate this package in favor of Babel plugin)

[fregante]

Thank you for your reply!

Indeed I can inline them but TypeScript still refuses to do anything with it.

I don’t have Babel in my pipeline and I’d rather keep it off since TypeScript does all of the work now.

In this case I ended up using buble-loader to load the SVG straight into React.createElement calls (faster than Babel) and a micro loader to add export default in front of it, completely bypassing both TypeScript and this loader.