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