Does react-native-svg work for the web?

[kopax]

I have just opened those issues:

• Improve react-native-svg for the web using @svgr/webpack expo/expo#6660
• 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. software-mansion/react-native-svg#1235

It seems that react-native-svg is already for the web, but it does not work for me.

Every component imported in the web are just path and not react component.

Do I need this plugin ? If yes, how do I include it in expo ?

[KEMBL]

If you are using webpack you can try this solution

software-mansion/react-native-svg#1478

[MohammadAzimi]

Hi @KEMBL! Thanks for your webpack solution. My webpack config is like this and I do alias like below.
Now I'm a bit confused about how should I configure my webpack now. Could you please help me solve it

module.exports = function override(config, env) {
  // allow importing from outside of src folder
  config.resolve.plugins = config.resolve.plugins.filter(
    plugin => plugin.constructor.name !== 'ModuleScopePlugin'
  )
  /** alias-parrt **/
  config.resolve.alias['react-native-linear-gradient'] = 'react-native-web-linear-gradient'
  /** alias-parrt **/
  config.module.rules[0].include = appIncludes
  config.module.rules[1] = null
  config.module.rules[2].oneOf[1].include = appIncludes
  config.module.rules[2].oneOf[1].options.plugins = [
    require.resolve('babel-plugin-react-native-web'),
  ].concat(config.module.rules[2].oneOf[1].options.plugins)
  config.module.rules = config.module.rules.filter(Boolean)
  config.plugins.push(
    new webpack.DefinePlugin({ __DEV__: env !== 'production' })
  )

  return config
}

[MohammadAzimi]

I fixed it in this way as you said

  config.resolve.alias['react-native-svg'] = aliasPathJoin(['react-native-svg', 'lib', 'module', 'ReactNativeSVG.web.js'])

the problem in my svgs was the style attribute which I removed and everything works fine