Can't get this plugin to work / Don't understand how to use it

What we had before:

• react-svg-loader (400KB(!) minified + gzipped) webpack.config.js:

      test: /\.svg$/,
      use: [
        'babel-loader',
        {
          loader: 'react-svg-loader',
          options: {
            svgo: {
              plugins: [
                { removeTitle: false },
              ],
            },
          },
        },
      ],
  

In a .jsx file we import svg’s like:

import Logo from 'assets/logo.svg'; // get's it from root even though component is in subfolder
import Logo from '../assets/logo.svg'; // I tried this as well with this module (correct relative)

What I did to replace react-svg-loader with babel-plugin-inline-react-svg: webpack.config.js:

      test: /\.svg$/,
      use: [
        'babel-loader',
      ],

.babelrc

-    "@babel/plugin-proposal-function-bind"
+    "@babel/plugin-proposal-function-bind",
+    [
+      "inline-react-svg",
+      {
+        "svgo": {
+          "plugins": [
+            {
+              "removeAttrs": { "attrs": "(data-name)" }
+            },
+            {
+              "cleanupIDs": true
+            },
+            { "removeTitle": false }
+          ]
+        }
+      }
+    ]

The result?: lots of these…:

Module build failed: Error: Cannot find module 'assets/logo.svg'

[andrecalvo]

I worked out why this wasn’t working my specific case… basically don’t use the rails asset pipeline to load your SVGs, I had to move them into the same directory as my React app and use the relative URL.

[ljharb]

yes, this approach relies on babel, and you’d want to avoid using the rails asset pipeline for svgs when using it.