在 React Native（Expo）中使用 SVG 图片（react-native-svg-transformer）

npm install react-native-svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
	<circle cx="12" cy="12" r="10"/>
	<line x1="12" y1="8" x2="12" y2="16"/>
	<line x1="8" y1="12" x2="16" y2="12"/>
</svg>

import Svg, { Circle, Line } from 'react-native-svg';
 
export default function SvgComponent() {
	return (
		<Svg width="100" height="100" viewBox="0 0 24 24">
			<Circle cx="12" cy="12" r="10" fill="none" stroke="black" strokeWidth="2"/>
			<Line x1="12" y1="8" x2="12" y2="16" stroke="black" strokeWidth="2"/>
			<Line x1="8" y1="12" x2="16" y2="12" stroke="black" strokeWidth="2"/>
		</Svg>
	);
}

import React from 'react';
import { View } from 'react-native';
import SvgComponent from './example';
 
export default function App() {
	return (
		<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
			<SvgComponent />
		</View>
	);
}

import * as React from "react"
import Svg, { SvgProps, Circle, Path } from "react-native-svg"
const SvgComponent = (props: SvgProps) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    stroke="currentColor"
    strokeLinecap="round"
    strokeLinejoin="round"
    strokeWidth={2}
    viewBox="0 0 24 24"
    {...props}
  >
    <Circle cx={12} cy={12} r={10} />
    <Path d="M12 8v8M8 12h8" />
  </Svg>
)
export default SvgComponent

npm install --save-dev react-native-svg-transformer
 
  # yarn add --dev react-native-svg-transformer

/* eslint-env node */
const { getDefaultConfig } = require('expo/metro-config');
 
/** @type {import('expo/metro-config').MetroConfig} */
 
module.exports = (() => {
	const config = getDefaultConfig(__dirname);
 
	const { transformer, resolver } = config;
 
	config.transformer = {
		...transformer,
		babelTransformerPath: require.resolve('react-native-svg-transformer/expo'),
	};
	config.resolver = {
		...resolver,
		assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
		sourceExts: [...resolver.sourceExts, 'svg'],
	};
 
	return config;
})();

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
 
const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;
 
/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve(
      "react-native-svg-transformer/react-native"
    )
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};
 
module.exports = mergeConfig(defaultConfig, config);

declare module '*.svg' {
  import React from 'react';
  import { SvgProps } from 'react-native-svg';
  const content: React.FC<SvgProps>;
  export default content;
}

import React from 'react';
import { View } from 'react-native';
import SvgComponent from '@/assets/image/example.svg';
 
export default function App() {
	return (
		<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
			<SvgComponent />
		</View>
	);
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
	<circle cx="12" cy="12" r="10"/>
	<line x1="12" y1="8" x2="12" y2="16"/>
	<line x1="8" y1="12" x2="16" y2="12"/>
</svg>

import { View } from 'react-native';
import SvgComponent from '@/assets/image/example.svg';
 
export default function App() {
	return (
		<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
			<SvgComponent fill={'blue'} stroke={'green'} width={100} height={100} />
		</View>
	);
}