警告:无效属性名：`'data-*'` `

Question

我正在尝试使用NEXT.js导入svg文件。

遵循所有的指令，可以很好地工作。

// .babelrc
{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true }],
    "inline-react-svg"
  ]
}

// image.tsx

import styled from 'styled-components';
import BackgroundImage from '../public/assets/img.svg';
export const WhyChooseUsSection = () => {
    return <>
                <div className="background">
                    <BackgroundImage/>
                </div>
                <style jsx>{`
                    div {
                        position: relative;
                        width: 100%;
                    }
                `}</style>
            </>
}

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

但它会发生警告。

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

这是因为打字吗？我怎么才能修好它？

Answer 1

我遇到了一个类似的问题，能够通过更新.babelrc文件中的.babelrc来解决问题。我对其进行了更新，以匹配babel-svg 自述文件的“选项”部分中列出的内容。

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