The above error occurred in the component

Question

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

You cannot import an svg like that, try using something like `react-native-svg` — Auticcat, May 03 '21 at 10:21

score 1 · Accepted Answer · answered May 03 '21 at 11:29

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>

score 0 · Answer 2 · edited Feb 19 '23 at 10:00

0

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

edited Feb 19 '23 at 10:00

Eric Aya

69,473
35
181
253

answered Feb 19 '23 at 04:35

kyty

76
1
9

The above error occurred in the component

2 Answers2