search

kristerkari / react-native-svg-transformer

Import SVG files in your React Native project the same way that you would in a Web application.
MIT License
1.58k stars 115 forks source link

Android fill is strange #252

Open Bibazavr opened 1 year ago

Bibazavr commented 1 year ago

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>
  2. 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>
  3. 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>
  4. 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 1 year ago

Step 4 worked for me, thx @Bibazavr!

  1. change fill to current in svg