SVGR (SVGO) removeAttrs does not remove specified fill atrribute

Question

Fill attribute does not get removed in final output even though removeAttrs is specified in .svgo.yml. This causes the issue when trying to update fill from props passed to generated component like so:

<Activity fill="red" />

When I manually remove fill attribute from generated <Path> in icon component I am able to change the fill via props.

.svgo.yml configuration:

plugins:
  - removeAttrs:
      - attrs: 'path:fill'
  - sortAttrs: true
  - removeXMLNS: true

.svgrrc.yml

icon: false
native: true
typescript: true
dimensions: true
expandProps: 'end'
ref: true
memo: true

package.json script used to generate icons from assets folder:

    "icons": "npx @svgr/cli -d src/icons assets"

One of the asset SVGs:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1799 4.41C17.1799 3.08 18.2599 2 19.5899 2C20.9199 2 21.9999 3.08 21.9999 4.41C21.9999 5.74 20.9199 6.82 19.5899 6.82C18.2599 6.82 17.1799 5.74 17.1799 4.41ZM13.3298 14.7593L16.2198 11.0303L16.1798 11.0503C16.3398 10.8303 16.3698 10.5503 16.2598 10.3003C16.1508 10.0503 15.9098 9.8803 15.6508 9.8603C15.3798 9.8303 15.1108 9.9503 14.9498 10.1703L12.5308 13.3003L9.75976 11.1203C9.58976 10.9903 9.38976 10.9393 9.18976 10.9603C8.99076 10.9903 8.81076 11.0993 8.68976 11.2593L5.73076 15.1103L5.66976 15.2003C5.49976 15.5193 5.57976 15.9293 5.87976 16.1503C6.01976 16.2403 6.16976 16.3003 6.33976 16.3003C6.57076 16.3103 6.78976 16.1893 6.92976 16.0003L9.43976 12.7693L12.2898 14.9103L12.3798 14.9693C12.6998 15.1393 13.0998 15.0603 13.3298 14.7593ZM15.4498 3.7803C15.4098 4.0303 15.3898 4.2803 15.3898 4.5303C15.3898 6.7803 17.2098 8.5993 19.4498 8.5993C19.6998 8.5993 19.9398 8.5703 20.1898 8.5303V16.5993C20.1898 19.9903 18.1898 22.0003 14.7898 22.0003H7.40076C3.99976 22.0003 1.99976 19.9903 1.99976 16.5993V9.2003C1.99976 5.8003 3.99976 3.7803 7.40076 3.7803H15.4498Z" fill="#200E32"/>
</svg>

Example of generated React Native icon component:

import * as React from 'react';
import Svg, {SvgProps, Path} from 'react-native-svg';

function SvgActivity(
  props: SvgProps,
  svgRef?: React.Ref<React.Component<SvgProps>>,
) {
  return (
    <Svg width={24} height={24} fill="none" ref={svgRef} {...props}>
      <Path
        fill="#200E32"
        fillRule="evenodd"
        d="M17.18 4.41c0-1.33 1.08-2.41 2.41-2.41S22 3.08 22 4.41s-1.08 2.41-2.41 2.41-2.41-1.08-2.41-2.41zm-3.85 10.35l2.89-3.73-.04.02c.16-.22.19-.5.08-.75a.737.737 0 00-.61-.44.768.768 0 00-.7.31l-2.42 3.13-2.77-2.18a.79.79 0 00-.57-.16.775.775 0 00-.5.3l-2.96 3.85-.06.09a.747.747 0 00.21.95c.14.09.29.15.46.15.23.01.45-.11.59-.3l2.51-3.23 2.85 2.14.09.06c.32.17.72.09.95-.21zm2.12-10.98c-.04.25-.06.5-.06.75 0 2.25 1.82 4.07 4.06 4.07.25 0 .49-.03.74-.07v8.07c0 3.39-2 5.4-5.4 5.4H7.4C4 22 2 19.99 2 16.6V9.2c0-3.4 2-5.42 5.4-5.42h8.05z"
        clipRule="evenodd"
      />
    </Svg>
  );
}

const ForwardRef = React.forwardRef(SvgActivity);
const MemoForwardRef = React.memo(ForwardRef);
export default MemoForwardRef;

Link to repo: https://github.com/jaksm/svgr-rn

Answer 1

As It turns out, correct way of creating .svgo.yml is wihout hyphens like this:

plugins:
  removeAttrs:
    attrs: 'path:fill'
  sortAttrs: true
  removeXMLNS: true

Original answer: https://github.com/gregberge/svgr/issues/511#issuecomment-734174195