Can't import svgs

If I want to import my svg like import Star from '../../assets/svgs/pinnedStar.svg'; I get this error

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: number.

my rn-cli.config.js:

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

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

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

[Sankalp-Saxena]

@kristerkari svg image is opening on devices but not on web getting following error,

DOMException: Failed to execute ‘createElement’ on ‘Document’: The tag name provided (‘/static/media/events-qengage.89418f90.svg’) is not a valid name.

[kristerkari]

@danbockapps and for typescript you might need to do declare module "*.svg";, I’m not sure, but you can try that.