1

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

<Activity fill="red" />

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

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

回购链接：https ://github.com/jaksm/svgr-rn

4

1 回答 1

1

事实证明，正确的创建方式.svgo.yml是没有这样的连字符：

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

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

于 2020-11-26T09:47:27.277 回答