React 本机 svg 转换器不会使用replaceAttrValues 为 svg 着色

Question

我正在尝试使用react-native-svg-transformer和react-native-svg为svg着色，但它不起作用。我的印象是文件 .svgrrc 没有被考虑在内，因为无论我更改它的内容，甚至删除它，它都不会改变任何东西。

我确保仔细遵循react-native-svg-transformer文档中描述的配置步骤，并使用文档中给出的代码创建了metro.config.js。

SVG 文件

<svg width="5988" height="4684" viewBox="0 0 5988 4684" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="5988" height="4684" fill="#f01"/>
<rect x="3144" y="200" width="2644" height="4284" fill="#000"/>
<path d="M3174 200H3593L3383.5 1895.5L3174 200Z" fill="#f01"/>
<path d="M3607 200H4026L3816.5 1895.5L3607 200Z" fill="#ff1"/>
<path d="M4040 200H4459L4249.5 1895.5L4040 200Z" fill="#f01"/>
<path d="M4473 200H4892L4682.5 1895.5L4473 200Z" fill="#ff1"/>
<path d="M4906 200H5325L5115.5 1895.5L4906 200Z" fill="#f01"/>
<path d="M5339 200H5758L5548.5 1895.5L5339 200Z" fill="#ff1"/>
<path d="M3593 4483.5H3174L3383.5 2788L3593 4483.5Z" fill="#f01"/>
<path d="M4026 4483.5H3607L3816.5 2788L4026 4483.5Z" fill="#ff1"/>
<path d="M4459 4483.5H4040L4249.5 2788L4459 4483.5Z" fill="#f01"/>
<path d="M4892 4483.5H4473L4682.5 2788L4892 4483.5Z" fill="#ff1"/>
<path d="M5325 4483.5H4906L5115.5 2788L5325 4483.5Z" fill="#f01"/>
<path d="M5758 4483.5H5339L5548.5 2788L5758 4483.5Z" fill="#ff1"/>
<rect x="200" y="200" width="2644" height="4284" fill="#000"/>
<path d="M230 200H649L439.5 1895.5L230 200Z" fill="#f01"/>
<path d="M663 200H1082L872.5 1895.5L663 200Z" fill="#ff1"/>
<path d="M1096 200H1515L1305.5 1895.5L1096 200Z" fill="#f01"/>
<path d="M1529 200H1948L1738.5 1895.5L1529 200Z" fill="#ff1"/>
<path d="M1962 200H2381L2171.5 1895.5L1962 200Z" fill="#f01"/>
<path d="M2395 200H2814L2604.5 1895.5L2395 200Z" fill="#ff1"/>
<path d="M649 4483.5H230L439.5 2788L649 4483.5Z" fill="#f01"/>
<path d="M1082 4483.5H663L872.5 2788L1082 4483.5Z" fill="#ff1"/>
<path d="M1515 4483.5H1096L1305.5 2788L1515 4483.5Z" fill="#f01"/>
<path d="M1948 4483.5H1529L1738.5 2788L1948 4483.5Z" fill="#ff1"/>
<path d="M2381 4483.5H1962L2171.5 2788L2381 4483.5Z" fill="#f01"/>
<path d="M2814 4483.5H2395L2604.5 2788L2814 4483.5Z" fill="#ff1"/>
</svg>

组件

<SVGBoard width={300} height={300} primary='#5A391A' secondary='#FFFFFF' tertiary='#000000' quaternary='#6CC6BB'/>

.svgrrc 文件

{
  "replaceAttrValues": {
    "#000": "{props.primary}",
    "#f01": "{props.secondary}",
    "#ff1": "{props.tertiary}",
    "#f00": "{props.quaternary}"
  }
}

但是，对于另一个只有一种颜色的 svg 文件和组件，例如...

<svg width="40" height="100" viewBox="0 0 40 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 0L40 100H0L20 0Z" fill="#000"/>
</svg>

<Triangle fill='green'/>

...它成功地将填充颜色更改为 fill 属性指定的颜色。

Answer 1

更改

<svg/>

标签元素中的 fill="#000000"

删除

<path/>

中的 fill="..."

配置文件.svgrrc

{
  "replaceAttrValues": {
    "#0000000": "{props.fill}",
  }
}

检查github：https://github.com/kristerkari/react-native-svg-transformer/issues/105