I am new to react-native
I'm trying react-native-svg to create a SVG icon, In that SVG icon I want add a Text on top of the icon like this Image.
I have try lots of way but could not able to succeed.
This is my SVG file
import Svg, { Circle, G, Line, Path, Polyline, Rect, Text } from 'react-native-svg';
const ServiceRequestIcon = ({ width, height, color, style, strokeWidth = `1.5` }: IIcon) => {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={width || 40}
height={height || 40}
viewBox="0 0 50 50"
style={style}
strokeWidth={strokeWidth * 15 || `15`}
fill={color || `green`}
>
<Text x="120" fontSize="500" fontWeight="bold"
y="20" textAnchor="middle">
New
</Text>
<Path d="M 9 3 C 6.25455 3 4 5.25455 4 8 L 4 34 C 4 36.7455 6.25455 39 9 39 L 12.918 39 C 12.9 40.1216 12.9074 41.2611 12.6582 42.1914 C 12.3309 43.4132 11.7621 44.3771 10.4863 45.1426 A 1.0001 1.0001 0 0 0 11 47 C 15.237 47 19.4156 44.7212 21.6133 39 L 41 39 C 43.7455 39 46 36.7455 46 34 L 46 8 C 46 5.25455 43.7455 3 41 3 L 9 3 Z M 9 5 L 41 5 C 42.6545 5 44 6.34545 44 8 L 44 34 C 44 35.6545 42.6545 37 41 37 L 21 37 A 1.0001 1.0001 0 0 0 20.0508 37.6836 C 18.6187 41.9799 16.3421 43.9518 13.6895 44.6641 C 14.0805 44.0385 14.4103 43.3864 14.5918 42.709 C 15.0145 41.1308 15 39.5 15 38 A 1.0001 1.0001 0 0 0 14 37 L 9 37 C 7.34545 37 6 35.6545 6 34 L 6 8 C 6 6.34545 7.34545 5 9 5 Z M 14.4297 9 L 13 10.4297 L 15.1426 14 L 16.5859 14 L 21.1113 18.5254 L 22.5254 17.1113 L 18 12.5859 L 18 11.1426 L 14.4297 9 Z M 31 9 C 27.686 9 25 11.686 25 15 C 25 15.734 25.1389 16.4359 25.3809 17.0859 L 13.7324 28.7324 C 13.6164 28.8484 13.5129 28.9763 13.4219 29.1133 C 13.3809 29.1753 13.3514 29.2416 13.3164 29.3066 C 13.2734 29.3846 13.2264 29.46 13.1914 29.543 C 13.1574 29.626 13.1363 29.7119 13.1113 29.7969 C 13.0903 29.8679 13.0628 29.9358 13.0488 30.0098 C 12.9848 30.3328 12.9848 30.6653 13.0488 30.9883 C 13.0638 31.0613 13.0903 31.1302 13.1113 31.2012 C 13.1363 31.2862 13.1574 31.3731 13.1914 31.4551 C 13.2254 31.5381 13.2715 31.6115 13.3145 31.6895 C 13.3495 31.7545 13.3799 31.8218 13.4219 31.8848 C 13.6049 32.1588 13.8393 32.3951 14.1133 32.5781 C 14.1753 32.6191 14.2436 32.6486 14.3086 32.6836 C 14.3866 32.7266 14.4619 32.7736 14.5449 32.8086 C 14.6279 32.8426 14.7138 32.8617 14.7988 32.8867 C 14.8698 32.9077 14.9377 32.9352 15.0117 32.9492 C 15.3347 33.0132 15.6672 33.0132 15.9902 32.9492 C 16.0642 32.9342 16.1321 32.9077 16.2031 32.8867 C 16.2881 32.8617 16.374 32.8426 16.457 32.8086 C 16.54 32.7746 16.6154 32.7266 16.6934 32.6836 C 16.7584 32.6486 16.8247 32.6191 16.8867 32.5781 C 17.0237 32.4861 17.1516 32.3836 17.2676 32.2676 L 28.9141 20.6191 C 29.5641 20.8611 30.266 21 31 21 C 34.314 21 37 18.314 37 15 C 37 14.074 36.7842 13.201 36.4102 12.418 L 31.9141 16.9141 L 29.0859 14.0859 L 33.582 9.58984 C 32.799 9.21584 31.926 9 31 9 Z M 29.9492 22.4141 L 26.4141 25.9512 L 32.7324 32.2695 C 32.8484 32.3855 32.9763 32.4891 33.1133 32.5801 C 33.1753 32.6211 33.2416 32.6505 33.3066 32.6855 C 33.3846 32.7285 33.46 32.7755 33.543 32.8105 C 33.626 32.8445 33.7119 32.8637 33.7969 32.8887 C 33.8679 32.9097 33.9358 32.9372 34.0098 32.9512 C 34.3328 33.0152 34.6653 33.0152 34.9883 32.9512 C 35.0623 32.9362 35.1302 32.9097 35.2012 32.8887 C 35.2862 32.8637 35.3721 32.8445 35.4551 32.8105 C 35.5381 32.7765 35.6134 32.7285 35.6914 32.6855 C 35.7564 32.6505 35.8247 32.6211 35.8867 32.5801 C 36.1607 32.3971 36.3951 32.1607 36.5781 31.8867 C 36.6201 31.8247 36.6495 31.7564 36.6855 31.6914 C 36.7275 31.6134 36.7736 31.5381 36.8086 31.4551 C 36.8426 31.3721 36.8637 31.2862 36.8887 31.2012 C 36.9097 31.1302 36.9362 31.0632 36.9512 30.9902 C 37.0152 30.6672 37.0152 30.3347 36.9512 30.0117 C 36.9362 29.9377 36.9097 29.8698 36.8887 29.7988 C 36.8637 29.7138 36.8426 29.6279 36.8086 29.5449 C 36.7746 29.4619 36.7266 29.3866 36.6836 29.3086 C 36.6486 29.2436 36.6191 29.1753 36.5781 29.1133 C 36.4861 28.9763 36.3836 28.8484 36.2676 28.7324 L 29.9492 22.4141 Z" />
</Svg>
);
};
Which is the better way to do this..!?
I'm assuming you just want the text in the middle of the icon (path) without the rotation of the text in the example image.
In this case you can do something like this:
import React, {useEffect, useState} from 'react';
import {View} from 'react-native';
import Svg, {
Circle,
G,
Line,
Path,
Polyline,
Rect,
Text,
} from 'react-native-svg';
const ServiceRequestIcon = ({
width,
height,
color,
style = {},
strokeWidth = `1.5`,
}: IIcon) => {
const w = width || 40;
const h = height || 40;
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={w}
height={h}
viewBox="0 0 50 50"
style={style}
strokeWidth={strokeWidth * 15 || `15`}
fill={color || `green`}>
<Path d="M 9 3 C 6.25455 3 4 5.25455 4 8 L 4 34 C 4 36.7455 6.25455 39 9 39 L 12.918 39 C 12.9 40.1216 12.9074 41.2611 12.6582 42.1914 C 12.3309 43.4132 11.7621 44.3771 10.4863 45.1426 A 1.0001 1.0001 0 0 0 11 47 C 15.237 47 19.4156 44.7212 21.6133 39 L 41 39 C 43.7455 39 46 36.7455 46 34 L 46 8 C 46 5.25455 43.7455 3 41 3 L 9 3 Z M 9 5 L 41 5 C 42.6545 5 44 6.34545 44 8 L 44 34 C 44 35.6545 42.6545 37 41 37 L 21 37 A 1.0001 1.0001 0 0 0 20.0508 37.6836 C 18.6187 41.9799 16.3421 43.9518 13.6895 44.6641 C 14.0805 44.0385 14.4103 43.3864 14.5918 42.709 C 15.0145 41.1308 15 39.5 15 38 A 1.0001 1.0001 0 0 0 14 37 L 9 37 C 7.34545 37 6 35.6545 6 34 L 6 8 C 6 6.34545 7.34545 5 9 5 Z M 14.4297 9 L 13 10.4297 L 15.1426 14 L 16.5859 14 L 21.1113 18.5254 L 22.5254 17.1113 L 18 12.5859 L 18 11.1426 L 14.4297 9 Z M 31 9 C 27.686 9 25 11.686 25 15 C 25 15.734 25.1389 16.4359 25.3809 17.0859 L 13.7324 28.7324 C 13.6164 28.8484 13.5129 28.9763 13.4219 29.1133 C 13.3809 29.1753 13.3514 29.2416 13.3164 29.3066 C 13.2734 29.3846 13.2264 29.46 13.1914 29.543 C 13.1574 29.626 13.1363 29.7119 13.1113 29.7969 C 13.0903 29.8679 13.0628 29.9358 13.0488 30.0098 C 12.9848 30.3328 12.9848 30.6653 13.0488 30.9883 C 13.0638 31.0613 13.0903 31.1302 13.1113 31.2012 C 13.1363 31.2862 13.1574 31.3731 13.1914 31.4551 C 13.2254 31.5381 13.2715 31.6115 13.3145 31.6895 C 13.3495 31.7545 13.3799 31.8218 13.4219 31.8848 C 13.6049 32.1588 13.8393 32.3951 14.1133 32.5781 C 14.1753 32.6191 14.2436 32.6486 14.3086 32.6836 C 14.3866 32.7266 14.4619 32.7736 14.5449 32.8086 C 14.6279 32.8426 14.7138 32.8617 14.7988 32.8867 C 14.8698 32.9077 14.9377 32.9352 15.0117 32.9492 C 15.3347 33.0132 15.6672 33.0132 15.9902 32.9492 C 16.0642 32.9342 16.1321 32.9077 16.2031 32.8867 C 16.2881 32.8617 16.374 32.8426 16.457 32.8086 C 16.54 32.7746 16.6154 32.7266 16.6934 32.6836 C 16.7584 32.6486 16.8247 32.6191 16.8867 32.5781 C 17.0237 32.4861 17.1516 32.3836 17.2676 32.2676 L 28.9141 20.6191 C 29.5641 20.8611 30.266 21 31 21 C 34.314 21 37 18.314 37 15 C 37 14.074 36.7842 13.201 36.4102 12.418 L 31.9141 16.9141 L 29.0859 14.0859 L 33.582 9.58984 C 32.799 9.21584 31.926 9 31 9 Z M 29.9492 22.4141 L 26.4141 25.9512 L 32.7324 32.2695 C 32.8484 32.3855 32.9763 32.4891 33.1133 32.5801 C 33.1753 32.6211 33.2416 32.6505 33.3066 32.6855 C 33.3846 32.7285 33.46 32.7755 33.543 32.8105 C 33.626 32.8445 33.7119 32.8637 33.7969 32.8887 C 33.8679 32.9097 33.9358 32.9372 34.0098 32.9512 C 34.3328 33.0152 34.6653 33.0152 34.9883 32.9512 C 35.0623 32.9362 35.1302 32.9097 35.2012 32.8887 C 35.2862 32.8637 35.3721 32.8445 35.4551 32.8105 C 35.5381 32.7765 35.6134 32.7285 35.6914 32.6855 C 35.7564 32.6505 35.8247 32.6211 35.8867 32.5801 C 36.1607 32.3971 36.3951 32.1607 36.5781 31.8867 C 36.6201 31.8247 36.6495 31.7564 36.6855 31.6914 C 36.7275 31.6134 36.7736 31.5381 36.8086 31.4551 C 36.8426 31.3721 36.8637 31.2862 36.8887 31.2012 C 36.9097 31.1302 36.9362 31.0632 36.9512 30.9902 C 37.0152 30.6672 37.0152 30.3347 36.9512 30.0117 C 36.9362 29.9377 36.9097 29.8698 36.8887 29.7988 C 36.8637 29.7138 36.8426 29.6279 36.8086 29.5449 C 36.7746 29.4619 36.7266 29.3866 36.6836 29.3086 C 36.6486 29.2436 36.6191 29.1753 36.5781 29.1133 C 36.4861 28.9763 36.3836 28.8484 36.2676 28.7324 L 29.9492 22.4141 Z" />
<Text x="12.5" y="25" text-anchor="middle" fontWeight="bold" fill="black">
New
</Text>
</Svg>
);
};
const App = () => {
return (
<View style={{padding: 50}}>
<ServiceRequestIcon width={200} height={200} />
</View>
);
};
export default App;
In your original question you've chosen a large x and a very large fontSize which results in the text being cut off.