← Back
react webpack

Load svg react components with webpack

I want to mimic's create react app svg feature:

import { ReactComponent as MyIcon } from "./icon.svg";

That feature uses the svgr library.

To configure webpack, first install dependencies:

npm i -D babel-plugin-named-asset-import @svgr/webpack

And then, in webpack.config.js:

  {
    test: /\.jsx?$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['env', 'react'],
        plugins: [
          [
            require.resolve('babel-plugin-named-asset-import'),
            {
              loaderMap: {
                svg: {
                  ReactComponent:
                    '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                },
              },
            },
          ],
        ],
      },
    }
  }