react-native-svg: importing .svg does not work on the web, Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

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.

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.

@kristerkari Any suggestions?

Here’s how I’m configured to do React Native plus React Native Web .svg file loading, using the react-native-svg-transformer and @svgr/webpack packages allowing for same import / use on both mobile and web. The SVGs are also resizable and can have their fill color changed (if you do no fill in the .svg)

metro.config.js

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

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

module.exports = async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();

  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
};

web pack.config.js (excerpt)

...
const svgLoaderConfiguration = {
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  use: [{ loader: '@svgr/webpack', options: { typescript: true, dimensions: false } }],
};
...

Example use

import AppLogo from './assets/AppLogo.svg';
...
<AppLogo fill={'green'} width={100} height={100} />

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} />

Well I’ve shown you how to do it in a project that uses webpack already, and I’m not part of the Expo support team, and certainly it’s possible to do with expo already as you can see in that repo. Please study webpack and expo in detail and ask them instead. This discussion does not belong in this repository.

I’m not involved in the development of expo. You should probably ask there instead @EvanBacon ?

react-native doesn’t have any support for svg. Therefore this library exists. But, this library doesn’t include handling of svg files, merely rendering react-components which consist of svg elements, and strings of xml content. react-native-svg-transformer handles loading .svg files, and requires configuration. It seems you’re asking these questions in the wrong places. These are beginner mistakes with react, react-native, expo, webpack etc., not issues or bugs with this library. Please do not burn out open source maintainers with noise which doesn’t belong in the specific repositories they maintain.

https://facebook.github.io/react-native/docs/platform-specific-code#platform-specific-extensions