Optimize App size: Convert PNG Images into SVG or Vector Icons

[rn-chris]

• Remove useless icon, images.
• Convert image icons into vector icons.
• Replace png files into svg files.

[rn-chris]

I completed for removing icons first, So I will try for removing images from now.

[ildaneta]

My suggestion to this issue was to utilize personalized svg's. Why?

First because we can have svg personalized to the app, which is impossible to have using libraries as vector icons.

To make this implementation is necessary:

Step I

yarn add react-native-svg

Step II

yarn add --dev react-native-svg-transformer

Step III

Insert inside metro.config.js

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig(__dirname);
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

I tried to make this config inside Whisper wallet code, but as we already have one config to use @ui-kitten I had some troubles.

Step IV

• Create a folder to types -> @types
• Create inside it a file called svg.d.ts and insert the code bellow:

declare module "*.svg" {
  import React from 'react'
  import { SvgProps } from 'react-native-svg'

  const content: JSX.Element<SVGProps>

  export default content
}

With all the previous steps performed we can use svg as a module, with that, inside our code we can create a folder to svg's, import svg files and use it in our code as a component:

import ArrowLeftSVG from '../../images/arrow-left.svg';

const App = () => {
  ...
  return (<ArrowLeftSVG /> )
}

[aguycalled]

There is already some work about this issue on pr #167. But I think eventually removing the kitten dependency would be good. What do you think?

[ildaneta]

If we can remove the Kitten dependency I won't more problems to use that solution. I'll try this approach. @aguycalled

I saw the #167 pull request, but I really think that we can use better ways to do this migration from png to svg.

What I need to have permission to submit pull request?

[aguycalled]

perfect! we can take your path then.

you can just fork the repository and open a pull request. thanks!