search

bitsongofficial / wallet-mobile

1 stars 2 forks source link

Improve Icons SVG Stroke #32

Closed DavideSegullo closed 2 years ago

DavideSegullo commented 2 years ago

We should improve icons SVG stroke, because on react native we have a bad rendering effect if we use opacity.

photo5852970076104407974

gabriele-pala commented 2 years ago

@DavideSegullo At the moment we proceed with this solution, we use the color icons: #5B5B6D when they are disabled and #FFFFFF when you click on them and they are active.

DavideSegullo commented 2 years ago

Thank you @gabriele-pala , we can move it to development @zheleznov163, you can follow @gabriele-pala comment for the fix.

zheleznov163 commented 2 years ago

I'm using icons exported from figma, with a few differences - I remove the inline stroke value, and the elements that are used for inline opacity. This is necessary to be able to manipulate the properties of the elements. Opacity is achieved by passing the HEX of the color with an alpha channel.

I noticed this shortcoming, and pointed out earlier that there is a problem. I'm creating a component that renders .svg and accepts a universal prop (stroke or fill, it doesn't matter. We agreed to use stroke).

In my experience, it's realistic (and practical) to create an SVG image that can accept a single color as any property, rather than trying to do complicated manipulations on each individual image in code.

DavideSegullo commented 2 years ago

Ye I agree with you, the only problem I can see is related with the opacity, as you can see on the icon for the translation. Ofc a solid color is the best way to solve, but probably we can improve the svg path

DavideSegullo commented 2 years ago

@zheleznov163 You can fix by using this hex color: #ACACEC