Importing SVG image ends up with base64 error in console and the whole site not loads

[JunekCZ]

I am trying to place icons into my navigation but I cannot solve the repetitive error coming after all possible solutions from the internet. Code:

import React from 'react';
import { Button, SafeAreaView, StatusBar, StyleSheet, Text, View, Image } from 'react-native';
import { Link } from 'react-router-native';
import HomeIcon from "../../assets/icons/ico_home.svg";

const Navigation = () => {
    const [height, setHeight] = React.useState(0);
    const y = 20;

    const styles = StyleSheet.create({
        flex: {
            display: 'flex',
            width: '100%',
            height: '100%',
            flexDirection: 'row',
            alignItems: 'flex-start',
            justifyContent: 'flex-start',
            borderRadius: height,
            backgroundColor: '#B3B3B3',
            overflow: 'hidden',
        },
        link: {
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'center',
            alignContent: 'center',
            width: '50%',
            paddingTop: y,
            paddingBottom: y
        },
        icon: {
            height: y
        }
    });
    return (
        <View style={styles.flex} onLayout={event => setHeight(event.nativeEvent.layout.height)}>
            <HomeIcon />
            <Link to="/" style={styles.link}>
                <Text>Home</Text>
            </Link>
            <Link to="/events" style={styles.link} >
                <Text>About</Text>
            </Link>
        </View>
    )
};

export default Navigation;

So I am importing HomeIcon. Now the error I am getting in the console.

Thank you in advance for your reply! UPDATE I forget to paste here metro.config.js:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

Another big edit! I found out this only not work in the browser. In the android it works!

[JunekCZ]

I 'solved' my problem with React svgr with just react-native-svg installed. But this is just a solution to my problem and not to this error so I will leave this for the administrators if they would like to close this as solved or leave it for further comments.