javascriptreactjsreact-nativereact-native-vector-icons

React-Native-Vector-icons Stroke Width

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.

Solution

  • 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>
);