Reducing app size by 1.7mb by removing Unnecessary Images

[harshvitra]

While working on Redeem function I came across 3 images which we were not going to implement with new design, hence there was a need to remove them.

On further research I saw lots of images in the Images and Images/Icons folder which accounted for 2.3 mb of that folder.

Recently I also integrated a library called as react-native-vecor-icons which is linked to various icon libraries from where we can use the available icons. (Same CDNs can be linked for Web, react-web-vector-icons)

### The Libraries available are -

1. AntDesign by AntFinance (297 icons)
2. Entypo by Daniel Bruce (411 icons)
3. EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
4. Feather by Cole Bemis & Contributors (v4.21.0, 279 icons)
5. FontAwesome by Dave Gandy (v4.7.0, 675 icons)
6. FontAwesome 5 by Fonticons, Inc. (v5.7.0, 1500 (free) 5082 (pro) icons)
7. Fontisto by Kenan Gündoğan (v3.0.4, 615 icons)
8. Foundation by ZURB, Inc. (v3.0, 283 icons)
9. Ionicons by Ben Sperry (v4.2.4, 696 icons)
10. MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
11. MaterialCommunityIcons by MaterialDesignIcons.com (v3.6.95, 3695 icons)
12. Octicons by Github, Inc. (v8.4.1, 184 icons)
13. Zocial by Sam Collins (v1.0, 100 icons)
14. SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)

So I started finding out alternatives of all the images which can directly be used from the CDN and made a document for the alternatives and also there were images which were not being used so the document has details on that too.

### Document - https://airtable.com/shrlM8WUTWP5NbfYH/tblbDoD4nW6Sr3cyF?blocks=hide

Total File size reduction - Around 184 files can be removed

If you want to add any new icons you can first search it here - https://oblador.github.io/react-native-vector-icons/

@sagararyal @norbertschuler @crucialfelix please have a look, this can save us a lot on the bundle size

[crucialfelix]

Great work summarizing everything! Definitely we should do this.

Could you add some columns on airtable so you can mark when final decisions are made for each one?

I note in react-native-vector-icons that it is annoying to link these in using our current react-native. Let's figure out if we can do the upgrade before doing this round on the icons.

[crucialfelix]

I think we all agree that the current icons look a bit old. I think we should also be careful not to use overly generic ones. flat-ui will be old soon. Some softness, roundness, personality is good—especially for the audience.

[harshvitra]

I note in react-native-vector-icons that it is annoying to link these in using our current react-native. Let's figure out if we can do the upgrade before doing this round on the icons.

The library is linked in few future branches of mine - You can check one on the reviews

[norbertschuler]

@harshvitra I appreciate your work and I also think images and icons could need a clean-up - I am not so sure about swapping the menu and navigations icons as I do not know if they haven't been specific design work for TTC. I think the native app size with 10-11MB file size is not so big compared to other apps. I am always more concerned about the size of the web client (JavaScript bundle size and styles sheets) as these are slowing down the websites and loading times of the app (maybe also performance of the native app as all the code need to be parsed locally through the JavaScript engines on the phones).

[crucialfelix]

I don't think he's proposing swapping out all images and icons. The airtable doc just lists them all so we can go through them and make decisions. Sagar is probably the best one to make the call to align with the new designs.

[harshvitra]

We can remove some of the images which are not needed and only keep the ones which we need.

I have observed that changing image color is also done by adding different images with different colors. Which is a bad practice, the icons act like fonts where we can directly change the color and size.

Also there are images which are there in the directory which are not being used anywhere, they can be removed.

Having more images will reduce the speed of transitions and animations in the app, and in our case most of the places the images are not even needed as they represent some icon.

[Plant-for-the-Planet]

Thanks @harshvitra for all this, I'll post a design in Zeplin with finals set of icons.

[norbertschuler]

@harshvitra do you know why @harshkurra integrated the node module react-native-vecor-icons into his PR https://github.com/Plant-for-the-Planet-org/treecounter-app/pull/1447#discussion_r326875590 - have you talked with him about using this now instead of adding images (which he btw. also did)?

If I saw it correctly he added fonts with a size about 2MB to the iOS and Android project (I am not sure how the web client is handling this module), so adding 2MB and therefore reducing 1,7MB of images at the end is increasing our apps size, isn't it?

[harshvitra]

The fonts part is still not sorted out, we will have to create a helper class for fonts. So that we can use it everywhere.

Yes I had a discussion with @harshkurra about react-native-vector-icons, I had already included that in one of my Draft PR on Reviews of Plant Projects, but there are some stuff left to on that so I told him to include it is his project.

[norbertschuler]

@harshvitra what do you think about the fact he including 2MB of font files to the apps? Couldn't that be reduced to e.g. only the FontAwesome he actually really used?

[harshvitra]

Yes that's why made this - https://airtable.com/shrlM8WUTWP5NbfYH/tblbDoD4nW6Sr3cyF?blocks=hide so that we can decide which font library/libraries we are using.

Also these fonts which are added contains the access to all the icons present out there. So if we are using 10 icons now and use 100 icons in future it wont change the size.