[Bug]

[YOEL311]

Describe the bug

A clear and concise description of what the bug is.

In my react-native App when I need to display an SVG icon (without any manipulation of the SVG option) I do it in this way

import { createElement } from 'react';

import INDICATOR from './indicator.svg';

export const getIconSVG = (): JSX.Element => {
  return createElement(INDICATOR);
};

to order work I need to add in my metro.config file this configuration

but in react-native-web in the storybook I got the error

Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/assets/indicator.svg') is not a valid name.

this my metro.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
const {
  resolver: { sourceExts, assetExts },
} = defaultConfig;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    unstable_allowRequireContext: true,
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
    getTransformOptions: () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
    assetExts: assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg', 'd.ts'],
  },
};
module.exports = mergeConfig(defaultConfig, config);

Steps to reproduce the behavior

git clone git@github.com:YOEL311/storybookPublic.git cd storybookPublic git switch SVG // switch to branch yarn yarn storybook

[YOEL311]

Hey @dannyhw I promise you this last issue (:

[dannyhw]

if you want to use svgs like components you need a loader for svgs that works for webpack, please check this comment on a previous issue:

https://github.com/storybookjs/addon-react-native-web/issues/50#issuecomment-1465026150

[YOEL311]

Thnaks