How to import SVG component as React component on the web with expo (SDK36)

Following this issue Improve react-native-svg for the web using @svgr/webpack · Issue #6660 · expo/expo · GitHub, I expected to see .svg file being imported on the web as react component.

This is possible with @svgr/webpack but that is not implemented. So far we have to rewrite the whole svg in another format.

I was not able to configure properly by creating my webpack.config.js:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  config.module.rules.push({
    test: /\.svg$/,
    use: [
      {
        loader: '@svgr/webpack',
        options: {
          native: true,
        },
      },
    ],
  });
  return config;
};

I know it should be integrated within expo but it seems it’s not.

How can I configure SVG import of react component in expo SDK36 ?

Is it possible for the user of Expo to extend Expo’s Webpack config?

Yes, it is possible as described here

That way you could add the @svgr/webpack dependency and configure it.

I have already tried and it does not work at all. (see comment here)

Basically, this is how my webpack.config.js looks like : expo-bug-reports/webpack.config.js at issue-6660 · kopax/expo-bug-reports · GitHub

The whole reproduction can be run:

git clone https://github.com/kopax/expo-bug-reports.git
cd expo-bug-reports
git checkout issue-6660
npm i 
npm test
npm run web

Without the webpack.config.js, at least we can use the require return in <img />, while with @svgr/webpack, we can’t (error remains the same)

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.