Installation is a 2 step process if you wish to use the icons provided by FontAwesome or other similar font libraries.You can also create your own icon set if you want to use custom icons.It also supports a couple of other components which might be useful.After integration, the usage will be as simple as It returns a React component which accepts name, etc.All the fonts are scalable and you can style them just like SVG.It comes bundled with a bunch of icon sets (default is FontAwesome). Let me introduce you to this amazing library called react-native-vector-icons. How do you get the power of SVG in a native environment? Though there are some plugins which let you render SVG, they do not support all SVG elements and are not very easy to use.

Unlike the web, react-native doesn't support SVG out of the box. Unfortunately, rendering SVGs in native is not as simple as it is in HTML/Web, where you can use SVG as an image or copy paste SVG content inside your HTML.

They are written in XML syntax so they can be inserted directly into HTML without worrying about bundling assets.

They are smaller in size as compared to images.

They provide us more flexibility in changing color.They are resolution independent (scalable).We prefer using SVGs (for icons, images) because of the following reasons: Those who come from a web development background know the power of SVG icons.

SVG Icons using react-native-vector-icons 🐾 Speed up development with some and ES7 features 🤘 Creating basic components and writing platform-specific codeĮSLint: The guardian of code conventions ⚔️

Google vector icon