React Native中如何使用本地SVG文件并自定义填充颜色

Hey there! I’ve dealt with this exact problem before—react-native-remote-svg is great for remote assets but falls short when you need to tweak local SVG colors. Here are two reliable solutions to get you up and running:

Solution 1: Use react-native-svg + react-native-svg-transformer (Recommended) #

This approach lets you import local SVGs directly as React components, giving you full control over fill colors and other properties.

Step 1: Install Dependencies #

First, install the core SVG library and the transformer to handle SVG files in Metro:

npm install react-native-svg
npm install --save-dev react-native-svg-transformer

Step 2: Configure Metro #

Update your metro.config.js file to tell Metro to process SVG files with the transformer instead of treating them as regular assets:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: getDefaultConfig(__dirname).resolver.assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...getDefaultConfig(__dirname).resolver.sourceExts, 'svg'],
  },
});

Step 3: Use the SVG as a Component #

Import your local SVG file like any other component, then pass the fill prop to customize its color:

import React from 'react';
import { View } from 'react-native';
import HomeIcon from './assets/home.svg';

const MyScreen = () => {
  return (
    <View>
      {/* Custom fill color */}
      <HomeIcon width={24} height={24} fill="#FF5733" />
      
      {/* Use currentColor to inherit from parent's color style */}
      <View style={{ color: '#33FF57' }}>
        <HomeIcon width={24} height={24} fill="currentColor" />
      </View>
    </View>
  );
};

export default MyScreen;

Note: If your SVG has hardcoded fill values in its paths, you’ll need to remove those first (or override them with the fill prop). Using fill="currentColor" in the SVG’s source code makes it easier to inherit colors from parent components.

Solution 2: Manually Convert SVG to react-native-svg Components #

If you only have a few SVGs or don’t want to configure Metro, you can convert the SVG code into a reusable React Native component manually.

Example Conversion #

Take your SVG file’s code, replace SVG elements with their react-native-svg equivalents, and create a component that accepts fill as a prop:

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

const CustomHeartIcon = ({ width = 24, height = 24, fill = '#FF0000' }) => {
  return (
    <Svg width={width} height={height} viewBox="0 0 24 24">
      <Path 
        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" 
        fill={fill} 
      />
    </Svg>
  );
};

export default CustomHeartIcon;

Then use it like any other component:

<CustomHeartIcon fill="#00FF00" width={32} height={32} />

Both methods work reliably—pick the one that fits your project size and workflow best!

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