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?

[omidkazemi1]

To support importing SVGs both as React components and as URLs (for use with <Image src={...} />) in a Next.js + TypeScript project, I did the following:

1. Custom Webpack Rules in next.config.js:

module.exports = {
  webpack(config) {
    // SVG as React component (default)
    config.module.rules.push({
      test: /\.svg$/,
      issuer: /\.[jt]sx?$/,
      resourceQuery: { not: [/url/] },
      use: ["@svgr/webpack"],
    });
    // SVG as URL (for <Image src={...} />)
    config.module.rules.push({
      test: /\.svg$/,
      resourceQuery: /url/, // *.svg?url
      type: "asset/resource",
    });
    return config;
  },
};

This lets you do:

import Logo from './logo.svg'; // React component for <Logo />
import logoUrl from './logo.svg?url'; // string URL for <Image src={logoUrl} />

You’ll also need this in your TypeScript declarations:

declare module "*.svg?url" {
  const src: string;
  export default src;
}

declare module "*.svg" {
  import React = require("react");

  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}

This way, you get both import styles working in Next.js with TypeScript!

[RihuaChen]

I use turbopack, but this two kinds of syntax can not working sametime in turbopack mode, here is my config, and this string URL mode is not working import logoUrl from './logo.svg?url'; // string URL for <Image src={logoUrl} />,

  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },