react-nativesvgsti

React Native load multiple SVG image

For a project in react native, I need to display a lot of SVG images.
I'm able to import my files as component and display it in my view this way:

import Logo from './assets/interface/logo.svg';

<Logo
 width={200}
 height={200}
/>

But I can't write it by hand for every image.
That why I tried to use SvgUri of react-native-svg for local files.

import SvgUri from 'expo';

<SvgUri
  width="200"
  height="200"
  source={{
    uri: './assets/interface/logo.svg'
  }}
/>

But I've got stuck with an invariant violation.
After some research, comments and text in the SVG file can lead to this kind of errors but after removing comments and other stuff I still have the same error.

Is there a way in react native to display a lot of SVG files without having to write 300 import by hand ?

Update 1:

require('./assets/interface/logo.svg')

Still give me the same error.

Solution

  • Or you could customize this python script to do the job for you

    Disclaimer: I am the author of the svg-icon-generator