如何为React-Native-Vector-Icons的FeatherIcon添加stroke-width属性？

react-native-vector-icons里的Feather图标是字体图标，并非SVG组件，所以直接在组件style中设置strokeWidth不会生效——字体图标是基于字符渲染的，没有可控制的stroke属性，它的粗细由字体文件本身决定。要实现图标变粗的需求，你可以尝试以下两种可行方案：

方案一：改用react-native-svg渲染原始Feather SVG图标 #

Feather本质是SVG图标库，你可以直接用react-native-svg组件渲染对应图标的原始SVG路径，从而完全控制strokeWidth等属性：

1. 先确保已安装react-native-svg：

npm install react-native-svg
# 或 yarn add react-native-svg

2. 找到对应图标的SVG路径（比如search图标的路径可从Feather图标库官方资源中获取），然后用Svg和Path组件重构：

import Svg, { Path } from 'react-native-svg';

// 自定义加粗版Search图标
const BoldSearchIcon = ({ color, size = 22, strokeWidth = 1 }) => (
  <Svg width={size} height={size} viewBox="0 0 24 24">
    <Path
      d="M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
      stroke={color}
      strokeWidth={strokeWidth}
      fill="none"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <Path
      d="M21 21L16.65 16.65"
      stroke={color}
      strokeWidth={strokeWidth}
      fill="none"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </Svg>
);

// 使用示例
<BoldSearchIcon color="#000" size={22} strokeWidth={2} />

方案二：使用基于SVG的Feather图标库 #

可以直接使用专门基于SVG实现的Feather图标库，比如react-native-feather，它支持直接设置strokeWidth属性：

1. 安装依赖：

npm install react-native-feather react-native-svg
# 或 yarn add react-native-feather react-native-svg

2. 直接使用组件并设置strokeWidth：

import { Search } from 'react-native-feather';

<Search
  color={color}
  size={22}
  strokeWidth={2} // 这里可以直接设置粗细，生效
/>

不推荐的临时方案：缩放模拟加粗 #

如果只是临时需求，可以通过缩放图标模拟加粗，但这会导致图标变形，效果并不理想：

import FeatherIcon from 'react-native-vector-icons/Feather';

<FeatherIcon
  style={{ transform: [{ scaleX: 1.1 }, { scaleY: 1.1 }] }}
  name={'search'}
  color={color}
  size={22}
/>

内容的提问来源于stack exchange，提问作者AbdulAzeez Olanrewaju