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'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.