SVG images with <Image>, and as React components

[alebelcor]

Hi,

The <Image> component makes it easy to display SVG images by importing them:

import icon from './icon.svg';
// ...
<Image src={icon} />

However this conflicts with Babel plugins like babel-plugin-inline-react-svg or Webpack loaders like @svgr/webpack that allow you to import SVG images as React components:

import Icon from './icon.svg';
// ...
<Icon fill="red" />

I understand the implications of both approaches and when to use each. And I was wondering if the community had any preferred approaches for when you want to use both on the same codebase.

Ideally I'd leave .svg imports to Next.js (to avoid fighting against it) and opt into transforming to React components on a case by case basis.

This works:

import Icon from '!@svgr/webpack!./icon.svg';
// ...
<Icon fill="red" />

But I was hoping there was a more elegant solution than that. For example, I'd be fine with:

import Icon from './icon.svg?react';

Not sure how to make that work though.

Any help and/or guidance would be appreciated.

Thanks!

[lukebussey]

That's exactly how I did it. https://gist.github.com/lukebussey/8387bb038629dccc01a62487614f44df

[haddadjo92]

Thanks man. that's really work for me in next.js

[lukebussey]

Actually, you can avoid having to prefix the import with !@svgr/webpack! by adding this to your next.config.js file:

module.exports = {
  webpack(config) {
    const fileLoaderRule = config.module.rules.find(
      (rule) => rule.test && rule.test.test('.svg'),
    );
    fileLoaderRule.exclude = /\.svg$/;
    config.module.rules.push({
      test: /\.svg$/,
      loader: require.resolve('@svgr/webpack'),
    });
    return config;
  },
};

[alebelcor]

Thanks! But I think this would turn all SVG imports into React components. And I'd like the ability to use both approaches in the same codebase 🙏 , i.e. being able to, both, import SVGs as React components¹ and being able to use them with the <Image> component².

¹ – When I need to style them via props (<Icon fill="red" />) or apply styles to them
² – For every other use case

[sudofix]

Thanks! But I think this would turn all SVG imports into React components. And I'd like the ability to use both approaches in the same codebase pray , i.e. being able to, both, import SVGs as React components1 and being able to use them with the <Image> component2.

1 – When I need to style them via props (<Icon fill="red" />) or apply styles to them 2 – For every other use case

Have been looking for a solution for this for a while now, any updates ?

[alebelcor]

Nope.

Turns out we can't use the Image component–with our current AWS infrastructure/setup anyway–so I decided to default SVG imports as React components:

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  }
};

I'd be great to have a more elegant solution than import Icon from '!@svgr/webpack!./icon.svg'; though

[stefanprobst]

you can use a webpack resourceQuery

[palminha]

Shouldn't using SVG and Image be part of the standard documentation?