Can I use my vector drawable from android in ReactJS as image? Is it possible or any way? Or do I need to convert it into SVG then PNG then have to use it into my React project?
My sample Android vector drawable:
<vector android:height="80dp" android:viewportHeight="512"
android:viewportWidth="512" android:width="80dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#b6b6b6" android:pathData="M421.054,414.843c-4.142,0 -7.5,3.358 -7.5,7.5v70.514c0,2.283 -1.858,4.141 -4.141,4.141h-40.317V349.301c0,-4.142 -3.358,-7.5 -7.5,-7.5c-4.142,0 -7.5,3.358 -7.5,7.5v147.698h-81.185l23.543,-25.9c2.572,-2.83 3.785,-6.861 3.244,-10.787c-0.01,-0.076 -0.022,-0.152 -0.035,-0.228L277.24,327.617l6.041,-9.094c3.34,2.372 5.913,4.656 10.738,4.656c4.908,0 9.497,-2.747 11.755,-7.269v-0.001l23.65,-47.4l53.876,20.865c1.949,0.836 30.252,13.582 30.252,47.238v50.73c-0.001,4.141 3.357,7.5 7.5,7.5c4.142,0 7.5,-3.358 7.5,-7.5v-50.73c0,-44.344 -37.969,-60.463 -39.585,-61.128c-0.047,-0.02 -0.095,-0.039 -0.143,-0.057l-89.668,-34.726v-21.03c14.242,-11.076 24.117,-27.495 26.596,-46.227c7.101,-0.5 13.69,-3.152 19.071,-7.779c7.027,-6.043 11.059,-14.838 11.059,-24.126c0,-7.708 -2.781,-15.068 -7.737,-20.803V92.953C348.144,41.699 306.446,0 255.192,0c-51.254,0 -92.952,41.699 -92.952,92.953v28.511c-5.009,5.677 -7.733,12.665 -7.733,20.074c0,9.291 4.03,18.085 11.059,24.129c5.377,4.625 11.962,7.274 19.061,7.775c2.499,19.083 12.662,36.114 28.117,47.339v19.92l-89.571,34.725c-0.047,0.018 -0.094,0.037 -0.141,0.056c-1.617,0.665 -39.585,16.784 -39.585,61.128v156.245c0,10.555 8.587,19.142 19.142,19.142h71.457c4.142,0 7.5,-3.358 7.5,-7.5c0,-4.142 -3.358,-7.5 -7.5,-7.5h-16.137V349.301c0,-4.142 -3.358,-7.5 -7.5,-7.5c-4.142,0 -7.5,3.358 -7.5,7.5v147.698h-40.319c-2.283,0 -4.141,-1.858 -4.141,-4.141V336.611c0,-33.769 28.493,-46.486 30.243,-47.234l53.834,-20.87l23.652,47.402c2.263,4.533 6.858,7.27 11.756,7.27c4.801,0 7.349,-2.249 10.738,-4.656l6.041,9.094l-22.421,132.468c-0.013,0.075 -0.024,0.15 -0.035,0.226c-0.542,3.924 0.671,7.957 3.244,10.789l23.543,25.9h-29.995c-4.142,0 -7.5,3.358 -7.5,7.5s3.358,7.5 7.5,7.5h200.365c10.555,0 19.142,-8.588 19.142,-19.142v-70.514C428.554,418.201 425.196,414.843 421.054,414.843zM315.375,263.069l-22.049,44.19c-0.548,-0.389 -12.233,-8.691 -26.517,-18.834c6.198,-7.651 -1.053,1.299 27.235,-33.617L315.375,263.069zM271.043,309.833l-5.718,8.607h-18.703l-5.718,-8.607l15.07,-10.703L271.043,309.833zM227.743,243.121v-14.036c9.112,3.673 18.85,5.376 28.36,5.376c9.833,0 19.476,-2.096 28.052,-5.846v14.567l-28.181,34.785L227.743,243.121zM340.881,141.539c-0.001,4.913 -2.129,9.562 -5.839,12.753c-2.453,2.11 -5.416,3.459 -8.661,3.987v-33.477C335.001,126.202 340.881,133.352 340.881,141.539zM184.007,158.279c-8.718,-1.415 -14.5,-8.623 -14.5,-16.741c0,-8.018 6.647,-14.544 14.5,-16.359V158.279zM184.41,109.896c-2.389,0.274 -5.127,0.921 -7.168,1.615V92.953c0,-42.983 34.968,-77.952 77.951,-77.952c42.983,0 77.951,34.969 77.951,77.952v18.043c-2.18,-0.663 -4.441,-1.101 -6.762,-1.307c0,-7.237 0.063,-5.841 -23.612,-31.294c-4.354,-4.678 -11.556,-5.658 -17.037,-2.077c-26.13,17.069 -58.005,25.644 -87.415,23.532C191.867,99.367 185.991,103.616 184.41,109.896zM199.008,164.184v-46.792v-2.465c32.375,1.896 66.318,-7.722 93.739,-25.283c10.858,11.658 16.738,17.773 18.634,20.099c0,5.884 0,47.705 0,54.44c0,30.447 -24.826,55.276 -55.277,55.276C221.91,219.46 199.008,192.934 199.008,164.184zM218.623,307.259l-22.049,-44.19l21.293,-8.247l27.241,33.625C231.255,298.284 219.88,306.366 218.623,307.259zM227.228,461.702l21.709,-128.263h14.071l21.709,128.263l-28.744,31.623L227.228,461.702z"/>
</vector>
You can not use your Android vector drawable in ReactJS or in normal JavaScript or in HTML/HTML5. Before you use it you have to convert it into SVG.
I have converted your Android vector drawable without of any programm. You could do it too - you have only to see very attentively what I have done. It is very simple. Or you could also use for it the converting online programm like:
https://shapeshifter.design
In this case you have to find in your code not convertable parts like color value in Android vector drawable format like @color/colorLightYellow before and replace it with color value in hexadecimal format like #fcab29.
For example you have to change android:fillColor="@color/colorLightYellow" to android:fillColor="#fcab29" before and then you have to save it in separated XML file and import it with this online programm as Android vector drawable. And after you have imported it you can export it as SVG image file.
Here is the converted SVG from your Android vector drawable:
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 512 512">
<path fill="#b6b6b6" d="M421.054,414.843c-4.142,0 -7.5,3.358 -7.5,7.5v70.514c0,2.283 -1.858,4.141 -4.141,4.141h-40.317V349.301c0,-4.142 -3.358,-7.5 -7.5,-7.5c-4.142,0 -7.5,3.358 -7.5,7.5v147.698h-81.185l23.543,-25.9c2.572,-2.83 3.785,-6.861 3.244,-10.787c-0.01,-0.076 -0.022,-0.152 -0.035,-0.228L277.24,327.617l6.041,-9.094c3.34,2.372 5.913,4.656 10.738,4.656c4.908,0 9.497,-2.747 11.755,-7.269v-0.001l23.65,-47.4l53.876,20.865c1.949,0.836 30.252,13.582 30.252,47.238v50.73c-0.001,4.141 3.357,7.5 7.5,7.5c4.142,0 7.5,-3.358 7.5,-7.5v-50.73c0,-44.344 -37.969,-60.463 -39.585,-61.128c-0.047,-0.02 -0.095,-0.039 -0.143,-0.057l-89.668,-34.726v-21.03c14.242,-11.076 24.117,-27.495 26.596,-46.227c7.101,-0.5 13.69,-3.152 19.071,-7.779c7.027,-6.043 11.059,-14.838 11.059,-24.126c0,-7.708 -2.781,-15.068 -7.737,-20.803V92.953C348.144,41.699 306.446,0 255.192,0c-51.254,0 -92.952,41.699 -92.952,92.953v28.511c-5.009,5.677 -7.733,12.665 -7.733,20.074c0,9.291 4.03,18.085 11.059,24.129c5.377,4.625 11.962,7.274 19.061,7.775c2.499,19.083 12.662,36.114 28.117,47.339v19.92l-89.571,34.725c-0.047,0.018 -0.094,0.037 -0.141,0.056c-1.617,0.665 -39.585,16.784 -39.585,61.128v156.245c0,10.555 8.587,19.142 19.142,19.142h71.457c4.142,0 7.5,-3.358 7.5,-7.5c0,-4.142 -3.358,-7.5 -7.5,-7.5h-16.137V349.301c0,-4.142 -3.358,-7.5 -7.5,-7.5c-4.142,0 -7.5,3.358 -7.5,7.5v147.698h-40.319c-2.283,0 -4.141,-1.858 -4.141,-4.141V336.611c0,-33.769 28.493,-46.486 30.243,-47.234l53.834,-20.87l23.652,47.402c2.263,4.533 6.858,7.27 11.756,7.27c4.801,0 7.349,-2.249 10.738,-4.656l6.041,9.094l-22.421,132.468c-0.013,0.075 -0.024,0.15 -0.035,0.226c-0.542,3.924 0.671,7.957 3.244,10.789l23.543,25.9h-29.995c-4.142,0 -7.5,3.358 -7.5,7.5s3.358,7.5 7.5,7.5h200.365c10.555,0 19.142,-8.588 19.142,-19.142v-70.514C428.554,418.201 425.196,414.843 421.054,414.843zM315.375,263.069l-22.049,44.19c-0.548,-0.389 -12.233,-8.691 -26.517,-18.834c6.198,-7.651 -1.053,1.299 27.235,-33.617L315.375,263.069zM271.043,309.833l-5.718,8.607h-18.703l-5.718,-8.607l15.07,-10.703L271.043,309.833zM227.743,243.121v-14.036c9.112,3.673 18.85,5.376 28.36,5.376c9.833,0 19.476,-2.096 28.052,-5.846v14.567l-28.181,34.785L227.743,243.121zM340.881,141.539c-0.001,4.913 -2.129,9.562 -5.839,12.753c-2.453,2.11 -5.416,3.459 -8.661,3.987v-33.477C335.001,126.202 340.881,133.352 340.881,141.539zM184.007,158.279c-8.718,-1.415 -14.5,-8.623 -14.5,-16.741c0,-8.018 6.647,-14.544 14.5,-16.359V158.279zM184.41,109.896c-2.389,0.274 -5.127,0.921 -7.168,1.615V92.953c0,-42.983 34.968,-77.952 77.951,-77.952c42.983,0 77.951,34.969 77.951,77.952v18.043c-2.18,-0.663 -4.441,-1.101 -6.762,-1.307c0,-7.237 0.063,-5.841 -23.612,-31.294c-4.354,-4.678 -11.556,-5.658 -17.037,-2.077c-26.13,17.069 -58.005,25.644 -87.415,23.532C191.867,99.367 185.991,103.616 184.41,109.896zM199.008,164.184v-46.792v-2.465c32.375,1.896 66.318,-7.722 93.739,-25.283c10.858,11.658 16.738,17.773 18.634,20.099c0,5.884 0,47.705 0,54.44c0,30.447 -24.826,55.276 -55.277,55.276C221.91,219.46 199.008,192.934 199.008,164.184zM218.623,307.259l-22.049,-44.19l21.293,-8.247l27.241,33.625C231.255,298.284 219.88,306.366 218.623,307.259zM227.228,461.702l21.709,-128.263h14.071l21.709,128.263l-28.744,31.623L227.228,461.702z"/>
</svg>