Implement .svg support in Expensify.cash

[shawnborton]

If you haven’t already, check out our contributing guidelines for onboarding!

---

Problem We currently use .png or .jpg images in Expensify.cash for things like logos and icons. With these file formats, we need to export the images at multiple sizes for various screen densities like @2x and @3x. For assets that have multiple states like active vs. inactive or like when a conversation is pinned vs. unpinned, we need to provide assets for each state assuming that the different states use different colors.

Solution Let's implement support for scalable vector graphics (.svg) images. The main benefits we receive with .svg images are:

• we only need to provide one asset and it will scale to any size in crisp, high resolution
• we can recolor the same asset for multiple states by using the fill property
• image sizes will be smaller resulting in a smaller app size

To implement the .svg solution, we're recommending the use of the react-native-svg library found here: https://github.com/react-native-svg/react-native-svg

For this initial proof of concept to be considered successful, we'd like to try implementing an .svg icon for the "pinned" state of a conversation. When a chat is pinned, it will always remain visible in the Left Hand Navigation even after you navigate away from it. There is a small pin icon in the top right header area of a chat to indicate if a conversation is pinned or not:

Pinned	Unpinned

The .svg icon you can use can be found in this .zip file here: pin.svg.zip

The pin icon asset looks like this:

While the asset is provided in black, we actually want it to display in our brand colors depending on the state:

• Enabled: themeColors.heading
• Disabled: themeColors.icon

You can access themeColor variables by importing themeColors from '/src/styles/themes/default.js'

[eucool]

Contributor details Your Expensify account email: codinggeek2023@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~01aa2a7f18ce802a42

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!