babel-plugin-inline-react-svg icon indicating copy to clipboard operation
babel-plugin-inline-react-svg copied to clipboard

Warning: React does not recognize the `maskType` prop on a DOM element.

Open mateuscdomingos opened this issue 4 years ago • 3 comments
trafficstars

When the lib transforms to SVG, it adds the maskType property and so I get the following error:

Warning: React does not recognize the maskType prop on a DOM element.

I need to change maskType to mask-type but I don't know how I can do it.

<mask id="a" maskType="alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">

mateuscdomingos avatar Aug 10 '21 01:08 mateuscdomingos

This is something svgo is doing, so you'd need to configure it with svgo options. Off the top of my head, I'm not sure what those would be.

ljharb avatar Aug 10 '21 02:08 ljharb

Hi, @ljharb!

I opened an issue there in the SVGO repository, they recommended me to write this plugin:

const renameMaskType = {
  name: 'renameMaskType',
  type: 'visitor',
  fn: () => {
    return {
      element: {
        enter: node => {
          node.attributes['mask-type'] = node.attributes.maskType
          delete node.attributes.maskType
        }
      }
    }
  }
}

If I create the svgo.config.js file, it doesn't work. Do you know how I can configure it?

mateuscdomingos avatar Aug 11 '21 12:08 mateuscdomingos

I'm also experiencing this issue. @MateusCastro , did you find a solution?

brada1703 avatar Feb 03 '22 22:02 brada1703