Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android fill is strange #252

Open
Bibazavr opened this issue Feb 21, 2023 · 1 comment
Open

Android fill is strange #252

Bibazavr opened this issue Feb 21, 2023 · 1 comment

Comments

@Bibazavr
Copy link

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

Step 4 worked for me, thx @Bibazavr!

  1. change fill to current in svg

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants