Warning: Invalid attribute name: `'data-name'` about babel-plugin-inline-react-svg HOT 3 OPEN

I ran into a similar issue and was able to resolve by updating my .babelrc file. I updated plugins to match what is shown in the "options" section of the babel-plugin-inline-react-svg README.

{
  "plugins": [
    [
      "inline-react-svg",
      {
        "svgo": {
          "plugins": [
            {
              "name": "removeAttrs", 
              "params": { "attrs": "(data-name)" }
            },
            "cleanupIDs"
          ]
        }
      }
    ]
  ]
}

from babel-plugin-inline-react-svg.

declare module '*.svg' {
  // import React = require('react');
  // export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  // const src: string;
  // export default src;
  const content: React.FunctionComponent<React.SVGProps<SVGElement>>;
  export default content;
}

I changed my type file like this and it seems to have solved the problem (the commented part was the old version)

from babel-plugin-inline-react-svg.

Apparently it didnt solve anything, imported different .svgs started having the same problem again. It seems this is related to VSCode caching the .svg files or something, because if the data-attributes are removed it will still complain about the data-attributes even when they are not there, but if you change the name and then point the import to the new path it works (apparently). So not sure if this is actually a problem with the plugin or VSCode

from babel-plugin-inline-react-svg.