importing .svg does not work on the web, Warning: </static/media/splashScreen.0f923900.svg /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

I have installed in my project expo install react-native-svg.

I have exported the svg as a component by doing:

import Logo from './logo.svg';
export default Logo;

It can render on native but fail on the web.

bundle.js:69367 Warning: </static/media/splashScreen.0f923900.svg /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

I have followed that configuration https://github.com/react-native-community/react-native-svg#use-with-svg-files

My metro.config.js is equal:

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

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

My app.json got added

{
+    "packagerOpts": {
+      "config": "metro.config.js",
+      "sourceExts": ["js", "jsx", "ts", "tsx", "svg"]
+    },
}

• react-native-svg 9.13.3
• react-native-svg-transformer 0.14.3
• SDK: 36 Documentation: https://docs.expo.io/versions/latest/sdk/svg/

[pors]

The fact that you get a uri instead of a react component means that you already have configured how to handle .svg files. You should just use that uri with a export default () => <img href={uri} />

For anyone going this path (like I did), make sure to use src instead of href.

[msand]

I’m not using any .svg files in any expo web project at the moment. So I have no such example to show you as I haven’t even attempted to do what you’re doing. Expo has a default metro / webpack configuration, but it’s not my expertise, and completely unrelated to this library.

you can use: File.js File.web.js File.ios.js File.android.js File.windows.js File.native.js File.future.platform.js File.custom.test.e2e.js File.jest.js

and do this in e.g. ExtraFile.js:

import File from './File'
export default () => <File with="extra stuff" />

and it’ll use the platform specific one depending on what you’ve made available and how you’ve configured metro / webpack / rollup / other web bundlers you’ve chosen to use.