React Native error on importing Icon from jsx file-CodePudding

I am trying to import a icon which was converted from svg to jsx using a online react native converter. But it keeps giving me this error:

View config getter callback for component 'path' must be a function (recieved 'undefined'). Make sure to start component names with a capital letter.

Even though i am starting the name with capital letter and it is a function here is the image of jsx file:

here is the writted code:

                    import React from "react";

                export default function MainLogo() {
                return (
                    <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="266.667"
                    height="266.667"
                    version="1"
                    viewBox="0 0 200 200"
                    >
                    <path
                        d="M830 1000V210h50v1580h-50v-790zM970 1000V480h50v1040h-50v- 
                        520zM550 1000V760h50v480h-50v-240zM690 1000V760h50v480h-50v- 
                        240zM1110 1005V770h50v470h-50v-235zM1250 1005V770h50v470h-50v- 
                        235zM1390 1005V770h50v470h-50v-235z"
                        transform="matrix(.1 0 0 -.1 0 200)"
                    ></path>
                    </svg>
                );
                }

and this is file code im trying to import it in to:

                  import { StatusBar } from 'expo-status-bar';
              import React from 'react';
              import { StyleSheet, Text, View } from 'react-native';
              import MainLogo from '../../logos/mainLogo.jsx';

              export default function FirstHomepage() {
                return (
                  <View style={styles.container}>
                    
                    <View style={styles.firstBackGround}>
                      <View style={styles.homeLogoContainer}>
                        <MainLogo />
                        <Text style={styles.libraryText}>LIBRARY</Text> 
                      </View>
                    </View>
                    
                  </View>
                );
              }

              const styles = StyleSheet.create({

                container: {  
                  
                },
                firstBackGround: {
                  height:'47%',

                },
                libraryText: {
                  fontSize:25,
                  marginLeft:15,
                  fontWeight:'bold',
                  color:'rgb(108, 150, 232)',
                },
                homeLogoContainer:{
                  flex:1,
                  alignItems:'center',
                  flexDirection:'row',
                  marginLeft: 10,
                }
              });

CodePudding user response：

Just do as below

import {MainLogo} from '../../logos/mainLogo.jsx';

CodePudding user response：

I think that the error is caused since the jsx filename starts with a lowercase letter, Convert the filename from mainLogo.jsx to MainLogo.jsx