Svg import works on android but not on web

[gunsela92]

Im trying to import a svg file to a component. Its working on android but creates error on web and ios. Im using expo and metro.config.

Error ;

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.6280a11f.svg') is not a valid name.

Code;

import Logo from "../../assets/logo.svg";

<View>
   <Logo style={drawerStyles().menuLogo}/>
</View>

metro.config.js

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"],
  };

  return config;
})();

[ysouane]

+1

[raffidahmad]

+1

[kristerkari]

It's because there is no Web support by default. You need to add that yourself with a custom config. Please have a look at this Pull Request for an example: https://github.com/kristerkari/react-native-svg-expo-example/pull/1

[bombillazo]

Trying out this "solution" yielded this result for me :/

./public/images/img-appTools.svg
TypeError: core$1.transform is not a function