Best practice to import svg in React Native

Question

I'm new to React native. I do the svg import as in the code below. But it doesn't looking well when it's too much. Is there a simpler way to do this?

 import React from 'react'; import LeftArrow from '../../assets/svgs/left-arrow.svg' import RightArrow from '../../assets/svgs/right-arrow.svg' import HeaderLogo from '../../assets/svgs/header-logo.svg' import NotificationOn from '../../assets/svgs/notification-on.svg' export default function SignUp() { return ( <> <LeftArrow width="100%" height="100%" /> <RightArrow width="100%" height="100%" /> <HeaderLogo width="100%" height="100%" /> <NotificationOn width="100%" height="100%" /> </> ) }

For example how can I use svg like this as I export and import images below

 // src/assets/images/index.js export const woman = require('./woman.png'); export const signUp = require('./signup-bg.png'); // src/screen/SignUp.js import { woman, signUp } from '../../assets/images/index.js'

Answer 1

Look at react-native-svg but you'll need the SVG file contents instead of bringing it in like an image.

Quick example:

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

const LeftArrow = (props) => {
 return (
   <Svg width={48} height={48} viewbox="0 0 48 48" {..props}>
     <Path d="something" fill="#00000" />
   </Svg>
 )
}

export default LeftArrow

but you could template the the file and bring in what you need from each SVG.