InvalidCharacterError on web

[hcphoon01]

When transforming an svg to use in my header it works correctly on mobile but gives me this error on web

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/text_white.14a9bce0.svg') is not a valid name.

I'm importing the SVG using this import Logo from '../assets/img/graphics/text_white.svg'; and adding to the JSX code using this <Logo height={'75%'} width={'35%'}/>

[rasmusmerzin]

I had a similar error InvalidCharacterError: String contains an invalid character and did some console-logging.

When importing a SVG, the default import on mobile was a React component and on the web was a base64 string of the SVG.

I then tried to enable and disable experimentalImportSupport and inlineRequires in the metro.config.js, neither of which worked for me.

I mitigated the issue by writing nasty compat files.

// compat.ts
export { default as Logo } from "assets/icon-plain.svg";

// compat.web.tsx
import React from "react";
import { Image } from "react-native";
import logoBase64 from "assets/icon-plain.svg";

// @ts-ignore
export const Logo = (props) => <Image style={props} source={logoBase64} />;

Line // @ts-ignore is because props is a SvgProps type from react-native-svg and it is assigned to StyleProp<ImageStyle> which is hardly ideal.

Then I imported the logo with import { Logo } from "compat"; and used in JSX with <Logo height={64} width={64} />.

// App.tsx
import React from "react";
import { View } from "react-native";
import { Logo } from "compat";

export default () => (
  <View
    style={{
      flex: 1,
      alignItems: "center",
      justifyContent: "center",
    }}
  >
    <Logo height={64} width={64} />
  </View>
);