Clear icon is tinted incorrectly

[ilmotta]

Bug Report

The clear icon is currently exported from Figma with the X in the center using white pixels. The problem is that in order to programmatically color icons, we need to use the tintColor prop of the RN Image component, but the prop works by tinting non-transparent pixels. Because the X is not transparent, any tint color will make the component look like a simple circle.

Note: I haven't looked at other icons and if they could have the same issue.

Solution

Bring the topic to designers' attention and align with the dev team the best approach.

Resources

Figma Iconset https://www.figma.com/file/qLLuMLfpGxK9OfpIavwsmK/Iconset?node-id=3239-987&t=sUSeh1WzRnxzYj3q-0

[ilmotta]

I talked to @pedro-et last week about this issue and he suggested we use SVGs for icons, instead of PNGs. Although the issue I reported can be solved by asking designers to update the clear icon to have an X in the center be transparent and then we add a white background in dark mode manually, they prefer if we use SVGs.

I also think icons should be SVGs, but I'm probably missing something. @flexsurfer, @Parveshdhull, @brianfernalld, @OmarBasem do you know the primary reason for icons to be PNGs instead of SVGs? Have you perhaps found rendering issues? Performance issues maybe? Although we can easily memoize SVG icons and any performance hit should be nullified.

Edit: For reference, the code below is a working example where we can control the foreground and background color of the clear icon.

(defn clear-icon
  [{:keys [size fg-color bg-color]
    :or   {size 20}}]
  [svg/svg
   {:width    size
    :height   size
    :view-box (str "0 0 " size " " size)
    :fill     :none}
   [svg/path
    {:d
     "M3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
     :fill bg-color}]
   [svg/path
    {:d
     "M9.15142 9.99998L7.07566 12.0757L7.9242 12.9243L9.99994 10.8485L12.0757 12.9242L12.9242 12.0757L10.8485 9.99998L12.9242 7.92421L12.0757 7.07568L9.99994 9.15145L7.92421 7.07572L7.07568 7.92425L9.15142 9.99998Z"
     :fill fg-color}]])

[OmarBasem]

Also, SVGs can be scaled with no compromise on quality. This means we won't need duplicated icons (x2, x3). And they have smaller file sizes compared to PNGs. I am not sure if there is a specific reason we are using PNGs.

[ilmotta]

@flexsurfer, since you have more context of past decisions in status-mobile, do you know why it was decided to use PNGs for icons instead of SVGs? I'm strongly inclined to create a PR that migrates all icons to SVGs. In web development, using SVGs for icons is a no-brainer, but perhaps there's something I'm missing in RN. Could you please, share your opinion?

FYI The issue's description and my comment #15606 (comment) above are important to understand the problem.

Thank you :)

[flexsurfer]

back then we had 2 problems, performance and lack of good implementation, it didn't work well for all different svgs and for all devices
this is the first implementation i did in 2017 (omg what?) https://github.com/status-im/status-mobile/pull/1695/files#diff-384aa873b3cdb68e999c3c4bf01f24ce59682135931bd7985a969d2c82245965

and then implemented the macro for colors but then we had more complex svg, and they were exported differently by tools and didn't work well, so we had to tune them manually in any way it was slow and buggy

so if we can solve this just by asking designers to change the icon in figma, this is the way to go

[flexsurfer]

hm, actually you say we still have to do something additional in the code to make it looks right, so probably we could use svg in that case for some "special" icons , wdyt? in that case we could have them as reagent components right ?

[ilmotta]

back then we had 2 problems, performance and lack of good implementation, it didn't work well for all different svgs and for all devices

Thanks for all the context way back to 2017!

hm, actually you say we still have to do something additional in the code to make it looks right, so probably we could use svg in that case for some "special" icons , wdyt? in that case we could have them as reagent components right ?

Correct, that would work @flexsurfer. But we'll have a bunch of exceptions, like expand-topbar, pending-state, mutual-contact, and others that can't be represented correctly with the usage of the tintColor property because they have 2 non-transparent colors.

Nowadays we have Figma and as far as I tested the SVG exported by Figma is quite clean and can be adapted to hiccup, and they rendered correctly. Of course, there are many icons I haven't tested, so take my experiment with a grain of salt.

So the ideal approach to me would be to have a single solution to all icons, not a mix of PNGs and SVGs, but let's do a mix for now and see how it goes. I agree with your suggestion, it's also less risky than changing a bunch of stuff and introducing issues in some devices, who knows. If, in the future, we feel using SVGs is the way to go we can gradually migrate the other icons anyway.

Thanks @flexsurfer, I'll try to fix only for the clear icon using an SVG for now.