SVGR(SVGO) remove Attrs 不移除指定的填充属性

Question

即使在 .svgo.yml 中指定了 removeAttrs，最终输出中也不会删除填充属性。当尝试从传递给生成的组件的道具更新填充时，这会导致问题，如下所示：

<Activity fill="red" />

当我从图标组件中生成的 <Path> 中手动删除 fill 属性时，我可以通过道具更改填充。

.svgo.yml配置：

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 用于从 assets 文件夹生成图标的脚本：

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

资产 SVG 之一：

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

生成的React Native图标组件示例：

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 回购：https://github.com/jaksm/svgr-rn

Answer 1

事实证明，创建 .svgo.yml 的正确方法是不使用连字符，如下所示：

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

原回答：https://github.com/gregberge/svgr/issues/511#issuecomment-734174195

SVGR(SVGO) remove Attrs 不移除指定的填充属性

SVGR (SVGO) removeAttrs does not remove specified fill atrribute

javascript

svg

reactjs

react-native

svgo