React Native: SVG Icon to Component

SVG Icon and PNG icons comparison

1. Start by exporting icon from Sketch/Figma to .svg file format.
   (named as question-mark.svg)

Export icon from Sketch/Figma to .svg file format

The question-mark.svg file should be viewed something like this.

Import react-native-svg, which allows you to use SVGs, with support interactivity and animation. And prop-types to document the intended types of properties passed to components.

npm i react-native-svg prop-types

Now create question-mark.tsx file and copy this code template.

Finally, paste the path information from .svg file to .tsx like so.

d="M15.5,0 C24.06065,0 31,6.93935 31,15.5 C31,24.06065 24.06065,31 15.5,31 C6.93935,31 0,24.06065 0,15.5 C0,6.93935 6.93935,0 15.5,0 Z M15.5,3.1 C8.6521,3.1 3.1,8.6521 3.1,15.5 C3.1,22.3479 8.6521,27.9 15.5,27.9 C22.3479,27.9 27.9,22.3479 27.9,15.5 C27.9,8.6521 22.3479,3.1 15.5,3.1 Z M15.19,20.15 C16.1324,20.15 16.895,20.9126 16.895,21.855 C16.895,22.7974 16.1324,23.56 15.19,23.56 C14.2476,23.56 13.485,22.7974 13.485,21.855 C13.485,20.9126 14.2476,20.15 15.19,20.15 L15.19,20.15 Z M15.562,7.75 C18.79065,7.75 20.925,9.4705 20.925,11.935 C20.925,13.57025 20.1004,14.7064 18.50855,15.60385 C17.10115,16.38505 16.64545,16.89965 16.5943,17.8343 L16.58965,18.0265 L16.58965,18.6 L13.59815,18.6 L13.5749,17.97225 C13.4354,16.3742 13.9779,15.41785 15.3419,14.58085 L15.60695,14.42585 C17.06395,13.59195 17.50415,13.06185 17.50415,12.0342 C17.50415,11.00655 16.64545,10.25945 15.35895,10.25945 C14.1422,10.25945 13.3114,10.95385 13.15795,12.04815 L13.1347,12.27135 L10.075,12.27135 C10.1308,9.61 12.0962,7.75 15.562,7.75 L15.562,7.75 Z

End results:

Component usage and output on your react native app.
It’s pixel perfect! You can change the size, color etc by passing props accordingly.

<QuestionIcon width={64} height={64} color={'#6236FF'} />
<QuestionIcon width={100} height={100} color={'#F7B500'} />
<QuestionIcon width={24} height={24} color={'#FA6400'} />
<QuestionIcon width={75} height={75} color={'#0091FF'} />

Actual icon component integration into react native app

That’s it. Thanks for reading and following along. I hope that this blog will give value to you at some point. Please feel free to reach out if you have any questions.

Now go out there and make it happen.