search

airbnb / babel-plugin-inline-react-svg

A babel plugin that optimizes and inlines SVGs for your React Components.
MIT License
474 stars 92 forks source link

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

Open mateuscdomingos opened 3 years ago

mateuscdomingos commented 3 years ago

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.

ljharb commented 3 years ago

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.

mateuscdomingos commented 3 years ago

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?

brada1703 commented 2 years ago

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