Warning: Invalid attribute name: `'data-name'`

[UnderTheMoonspell]

So everytime I add a new .svg file to the project I get this warning and I have to fiddle around with the width/height/viewbox of the component with random values until it works. I can't see any fix online and it just takes hours to fix any new .svg. At some point I gave up and started to use .svg in img tags but we have a requirement that the colors should be overriden by CSS so I really need to use it like a component.

import { ReactComponent as FileIcon } from '../../../public/icons/file.svg';
<FileIcon width="40px" height="50px" />

[UnderTheMoonspell]

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)

[UnderTheMoonspell]

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

[engrebecca]

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"
          ]
        }
      }
    ]
  ]
}