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

Following this issue, 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);
    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 :

The whole reproduction can be run:

git clone
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)