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/

[pyrossh]

I’m doing this for now to make it work,

const Icon = ({ children }) => {
  if (Platform.OS === 'web') {
    return <img src={children.type} {...children.props} />;
  }
  return children;
};

 <Icon>
     <ArrowBackIcon width={32} height={32} />
</Icon>

[joranb]

Would just mention my comment here: https://github.com/expo/expo/issues/6660#issuecomment-1076338873

There is someone who has fixed this issue in this unpublished package: https://github.com/HolovisSoftwareDev/react-native-svg-transformer-fix-expo

See my comment for an example.

I can confirm it then works with latest Expo, react-native-svg and react-native-svg-transfomer on web, iOS and Android without the need to run Platform.OS checks when importing static svg files.

It is however not clear to me if this issue fix has to be implemented on the Expo side or in react-native-svg-transformer, but maybe you could take a look when you have time @kristerkari . This issue has been a huge pain for me, used several days troubleshooting, finally found a solution that works. But it would be nice to get rid of the unpublished fix package and just use react-native-svg and react-native-svg-transformer when using Expo, but the bug has to be fixed first.