kristerkari/react-native-svg-transformer

Android fill is strange

Bibazavr opened this issue · 1 comments

Bibazavr commented

Step for reproduce

deps:

    "react-native": "^0.71.0",
    "react-native-svg": "^13.7.0",
    "react-native-svg-transformer": "^1.0.0",

svg icon:

<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="M2 10V6C2 4.34315 3.34315 3 5 3H7.75736C8.55301 3 9.31607 3.31607 9.87868 3.87868L11 5H19C20.6569 5 22 6.34315 22 8V10C22 8.34315 20.6569 7 19 7H5C3.34315 7 2 8.34315 2 10Z" fill="#000"/>
    <path opacity="0.4" d="M19 7H5C3.34315 7 2 8.34315 2 10V18C2 19.6569 3.34315 21 5 21H19C20.6569 21 22 19.6569 22 18V10C22 8.34315 20.6569 7 19 7Z" fill="#000"/>
</svg>

.svgrrc:

{
  "replaceAttrValues": {
    "#000": "{props.fill}"
  }
}

usage:

import SVG from './svg.svg'
....
      <SVG fill={'#ba80ff'} />
....

ios:
image

android:
image

But we have a few options to fix by change svg icon:

  1. change order of paths
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path opacity="0.4" d="M19 7H5C3.34315 7 2 8.34315 2 10V18C2 19.6569 3.34315 21 5 21H19C20.6569 21 22 19.6569 22 18V10C22 8.34315 20.6569 7 19 7Z" fill="#000"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 10V6C2 4.34315 3.34315 3 5 3H7.75736C8.55301 3 9.31607 3.31607 9.87868 3.87868L11 5H19C20.6569 5 22 6.34315 22 8V10C22 8.34315 20.6569 7 19 7H5C3.34315 7 2 8.34315 2 10Z" fill="#000"/>
</svg>
  1. remove fill-rule from first path
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path clip-rule="evenodd" d="M2 10V6C2 4.34315 3.34315 3 5 3H7.75736C8.55301 3 9.31607 3.31607 9.87868 3.87868L11 5H19C20.6569 5 22 6.34315 22 8V10C22 8.34315 20.6569 7 19 7H5C3.34315 7 2 8.34315 2 10Z" fill="#000"/>
    <path opacity="0.4" d="M19 7H5C3.34315 7 2 8.34315 2 10V18C2 19.6569 3.34315 21 5 21H19C20.6569 21 22 19.6569 22 18V10C22 8.34315 20.6569 7 19 7Z" fill="#000"/>
</svg>
  1. remove clip-rule from first path
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd"  d="M2 10V6C2 4.34315 3.34315 3 5 3H7.75736C8.55301 3 9.31607 3.31607 9.87868 3.87868L11 5H19C20.6569 5 22 6.34315 22 8V10C22 8.34315 20.6569 7 19 7H5C3.34315 7 2 8.34315 2 10Z" fill="#000"/>
    <path opacity="0.4" d="M19 7H5C3.34315 7 2 8.34315 2 10V18C2 19.6569 3.34315 21 5 21H19C20.6569 21 22 19.6569 22 18V10C22 8.34315 20.6569 7 19 7Z" fill="#000"/>
</svg>
  1. change fill to current in svg
<svg width="24" height="24" viewBox="0 0 24 24" fill="current" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd"  d="M2 10V6C2 4.34315 3.34315 3 5 3H7.75736C8.55301 3 9.31607 3.31607 9.87868 3.87868L11 5H19C20.6569 5 22 6.34315 22 8V10C22 8.34315 20.6569 7 19 7H5C3.34315 7 2 8.34315 2 10Z" fill="#000"/>
    <path opacity="0.4" d="M19 7H5C3.34315 7 2 8.34315 2 10V18C2 19.6569 3.34315 21 5 21H19C20.6569 21 22 19.6569 22 18V10C22 8.34315 20.6569 7 19 7Z" fill="#000"/>
</svg>

Question

Why it's happened? Opacity affect somehow or what?

luizxsoto commented

Step 4 worked for me, thx @Bibazavr!

  1. change fill to current in svg