Svg import works on android but not on web

gunsela92 commented 2 years ago

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 commented 1 year ago

+1

raffidahmad commented 1 year ago

+1

kristerkari commented 1 year ago

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 commented 1 year ago

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

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

kristerkari / react-native-svg-transformer

Svg import works on android but not on web #211