I picked an icon from the react-native-vector-icon
package.
Let's say for example featherIcons
How do I add a stroke-width
property to react-native-vector-icons.
import FeatherIcon from 'react-native-vector-icons/Feather';
<FeatherIcon
style={{strokeWidth: 1}} // stroke width does not exist here
name={'search'}
color={color}
size={22}
/>
I just want to make the icon a thicker.
For precise control over the appearance of your icons, including stroke width, I recommend using SVG icons instead of font icons. Libraries like react-native-svg enable you to use SVGs directly in your React Native application, where you can specify the strokeWidth among other properties.
import Svg, { Path } from 'react-native-svg';
const CustomIcon = () => (
<Svg height="24" width="24" viewBox="0 0 24 24">
<Path
d="M5,12 L19,12"
stroke="black"
strokeWidth="2" // Here you can set the stroke width
/>
</Svg>
);