react native import svg as component code example

Example 1: importing svg into react

import React from 'react';
import { ReactComponent as BrandIcon } from "./assets/brand-icon.svg";

export default function(){
  return( 
      <div>
          <BrandIcon />
      </div>
   );
}

Example 2: use svg in react native

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


//Add this this to metro.config.js
const { getDefaultConfig } = require("metro-config");

module.exports = (async () => { 
	const {  
		resolver: { 
			sourceExts, 
			assetExts 
		}  
	} = await getDefaultConfig(); 

	return {
		transformer: {      
			babelTransformerPath: require.resolve("react-native-svg-transformer")    
		},    
		resolver: {
			assetExts: assetExts.filter(ext => ext !== "svg"),
			sourceExts: [...sourceExts, "svg"]    
		}};
})();