CODEWITHSUNDEEP
react-nativesvgexporeact-native-svg
Afonso Salvador
Afonso Salvador

Reputation: 65

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>
  )
}

Upvotes: 2

Views: 7828

Answers (2)

kyty
kyty

Reputation: 96

Absolutely, you can't import svg like that.

You can use badass packages like SVGR. This package will auto transforms your svg to react component.

And you can use like this

import Star from './star.svg'

const Example = () => (
  <div>
    <Star />
  </div>
)

Upvotes: 0

Michael Rovinsky
Michael Rovinsky

Reputation: 7230

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>

Upvotes: 1

Related Questions