SVG to React Native SVG Converter - React Native Components

SVG to React Native SVG

Paste your SVG code and get a React Native SVG component

SVG Input

<svg width="299" height="272" viewBox="0 0 299 272" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M196.049 271.336C181.524 267.627 170.006 259.487 159.159 250.243C155.361 247.007 151.684 243.588 148.27 239.954C145.604 237.116 143.803 237.037 140.448 239.446C130.334 246.707 120.061 253.837 109.31 260.089C101.515 264.621 92.6337 267.034 83.4218 266.526C69.7569 265.772 60.785 258.371 56.3274 245.689C50.9903 230.504 52.8774 215.106 55.8707 199.783C56.7 195.537 57.6209 191.263 59.0483 187.194C60.3962 183.352 59.5159 181.574 55.6175 180.22C42.0271 175.497 28.988 169.548 17.6594 160.493C8.19237 152.925 0.440131 144.155 0.01723 131.109C-0.37787 118.921 6.06363 110.296 15.0578 103.215C26.9209 93.8761 40.7579 88.6409 55.0927 84.5197C66.2542 81.3109 64.3392 82.51 63.4794 72.3844C62.4142 59.8393 61.6077 47.1147 62.5264 34.6026C63.4607 21.8787 68.0615 10.1094 80.4502 3.50536C91.7352 -2.51026 102.835 0.0460892 113.607 4.95194C127.138 11.1146 138.305 20.5944 148.729 31.0157C153.752 36.0367 153.804 36.0714 159.132 31.6922C171.693 21.3665 184.863 12.0624 200.801 7.65725C225.183 0.918046 242.889 13.4042 245.053 38.7054C246.363 54.0315 244.199 68.9883 239.852 83.6244C238.396 88.5273 239.498 90.7341 244.446 92.406C258.253 97.0712 271.538 103.212 282.404 113.026C288.05 118.126 293.151 124.578 296.397 131.417C301.712 142.616 298.383 153.301 290.273 162.309C278.306 175.601 262.274 181.735 245.75 186.794C233.748 190.469 233.823 190.323 235.618 202.614C237.872 218.051 238.693 233.51 233.687 248.613C227.612 266.94 215.715 274.113 196.049 271.336ZM140.01 111.213C126.814 116.453 120.12 129.219 123.571 142.56C126.838 155.19 139.156 163.896 151.589 162.364C167.888 160.355 178.265 146.318 174.937 130.305C171.629 114.389 154.921 105.953 140.01 111.213ZM202.947 107.823C205.546 112.879 208.144 117.935 210.743 122.991C211.322 122.982 211.902 122.973 212.481 122.963C215.522 115.5 218.69 108.081 221.417 100.504C221.699 99.7185 219.571 97.204 218.198 96.8316C211.96 95.1399 205.602 93.88 199.261 92.5892C198.14 92.361 196.899 92.7242 195.122 92.8593C197.861 98.1077 200.227 102.639 202.947 107.823ZM93.7129 160.852C91.632 156.811 89.5512 152.771 86.7645 147.359C83.1041 156.235 79.8966 163.653 77.1244 171.23C76.8084 172.093 78.687 174.66 79.9702 175.05C85.0394 176.594 90.2623 177.655 95.4586 178.751C97.7408 179.232 100.096 179.368 103.477 179.795C99.9322 172.922 96.9906 167.218 93.7129 160.852ZM129.444 197.526C133.839 203.562 138.237 209.596 142.628 215.635C144.498 218.207 146.289 217.862 148.283 215.687C152.553 211.027 156.964 206.494 161.212 201.814C162.198 200.728 162.765 199.263 163.815 197.481C152.233 196.906 141.625 196.366 131.013 195.9C130.508 195.878 129.975 196.517 129.444 197.526ZM81.4052 97.394C83.4513 103.963 85.4974 110.532 87.5435 117.101C88.0724 117.125 88.6014 117.148 89.1303 117.172C95.0818 107.832 101.033 98.4919 106.985 89.1517C106.706 88.7085 106.427 88.2652 106.147 87.822C99.2733 88.6203 92.4119 89.5668 85.5203 90.1637C81.0868 90.5477 79.4557 92.3308 81.4052 97.394ZM163.226 66.4496C160.786 63.2867 158.246 60.1947 155.936 56.9392C153.956 54.1483 152.198 54.1964 149.983 56.6591C147.201 59.7523 144.179 62.6289 141.371 65.6996C139.011 68.2805 136.808 71.0055 133.783 74.548C146.453 75.1452 157.584 75.6699 170.234 76.2662C167.425 72.339 165.529 69.6894 163.226 66.4496ZM202.862 183.061C206.806 182.516 210.804 182.204 214.662 181.293C215.949 180.989 218.007 178.834 217.791 178.065C215.639 170.404 213.086 162.855 210.646 155.274C210.054 155.312 209.463 155.349 208.871 155.387C203.017 164.559 197.163 173.73 190.525 184.131C195.46 183.722 198.722 183.452 202.862 183.061Z" fill="#60D9FA"/>
</svg>

React Native Output

React Native SVG code will appear here...

How to use:

Paste your SVG code in the left panel
Preview your SVG or click "Convert" to transform it to React Native SVG
Copy the generated code and use it in your React Native app
Make sure to install react-native-svg: npm install react-native-svg