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

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';

```


Reproduce the warning by importing '../../../public/icons/file.svg' as a ReactComponent and rendering it with width and height props. Investigate how the Babel plugin processes that SVG and confirm that the warning is gone while the SVG remains usable as a component with CSS-overridable colors.

Written by the indexing model from the issue text.