Search code examples
react-nativesvgexporeact-native-svg

The above error occurred in the </static/media/igesticon.731bb908.svg> component

I have a bug that has been giving me a lot of headaches, I intend to put .svg images into my project and I have tried several ways although it always gives me an error... I am using the lib react-native-svg and I am doing it the following way:

Error: The above error occurred in the </static/media/igesticon.731bb908.svg> component: in /static/media/igesticon.731bb908.svg

MedicationScreen

import React from 'react'
import { View, Text, FlatList, StyleSheet, Dimensions } from 'react-native'
import Logo from "../../assets/igesticon.svg";


const MedicationScreen = () => {
  return(
      <View>
          <Logo width={120} height={40} />
      </View>
  )
}
Solution

  • You can embed SVG the following way:

    const MedicationScreen = () => {
  return(
      <View>
          <svg width={120} height={40} >
            <image href="../../assets/igesticon.svg" />
          </svg>
      </View>
  )
}

    See how it works in the snippet below:

    <svg width="64" height="64" viewBox="30 0 200 200">
  <image href="https://upload.wikimedia.org/wikipedia/he/a/a7/React-icon.svg"/>
</svg>