How to Handle SVG to use as ReactComponent as well as to pass on img tag or <Image />

[beezay]

Summary

I was trying to use my custom SVG and I added those SVG within public or assets folder of my project.
Say (example) we have assets/google.svg
Now I want my NextJS to handle both of this case:

• import {ReactComponent as Google} from 'assets/google.svg'
  and render as:
  <div> <Google /> </div>

• import GoogleUrl from 'assets/google.svg'
  and render as:
  <Image src={GoogleUrl} />

Additional information

No response

Example

No response

[LimSB-dev]

To handle an SVG file in React and use it as both a React component and as an image source in the <img> tag or <Image> component, you can follow these steps:

1. Import the SVG file: Start by importing the SVG file into your React component.

import {ReactComponent as Google} from 'assets/google.svg';

Make sure you have installed the necessary packages to handle SVG files, such as @svgr/webpack and svgo.

2. Use as a React component: To use the SVG as a React component, simply render it as JSX in your component's render method.

function GoogleComponent() {
  return (
    <div>
      <Google />
    </div>
  );
}

Now, the SVG will be rendered as a React component in the DOM.

3. Use as an image source: To use the SVG as an image source in the <img> tag or <Image> component, you need to convert the SVG to a data URL. You can achieve this by importing the SVG as a string and then converting it using the btoa function.

import {ReactComponent as Google} from 'assets/google.svg';

// Convert SVG to data URL
const svgString = new XMLSerializer().serializeToString(Google);
const base64Svg = btoa(svgString);
const dataUrl = `data:image/svg+xml;base64,${base64Svg}`;

function GoogleComponent() {
  return (
    <div>
      {/* Using <img> tag */}
      <img src={dataUrl} alt="SVG" />

      {/* Using <Image> component from a UI library like Next.js */}
      <Image src={dataUrl} alt="SVG" />
    </div>
  );
}

By converting the SVG to a data URL, you can use it as a source for the <img> tag or <Image> component, just like any other image file.

That's it! Now you can handle the SVG file as both a React component and an image source in your React application.

[thanhtutzaw]

why I don't need to convert to dataurl when using with next Image

[LimSB-dev]

Apologies for the confusion. You're correct, when using the <Image> component from Next.js, you don't need to convert the SVG to a data URL. The Next.js Image component can handle SVG files directly.

Here's an updated example:

import {ReactComponent as Google} from 'assets/google.svg';
import Image from 'next/image';

function YourComponent() {
  return (
    <div>
      {/* Using <Google> as a React component */}
      <Google />

      {/* Using <Image> component from Next.js */}
      <Image src="assets/google.svg" alt="SVG" />
    </div>
  );
}

In this case, you can import the SVG file as a React component using the ReactComponent import syntax, and render it directly as a component in JSX. For the Next.js Image component, you can provide the path to the SVG file as the src attribute, and it will handle it properly without the need for conversion to a data URL.

Please note that the Next.js Image component performs optimizations for images, including automatic resizing, lazy loading, and generating different sizes for responsive images. It's a recommended approach for handling images in Next.js applications.

[7hourspg]

Configuration for SVG Handling in Next.js 🚀

I found the following configuration to work seamlessly in Next.js:

export default {
  webpack: (config) => {
    // Add rule for SVG files
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack', 'url-loader'],
    });

    return config;
  }, 
  reactStrictMode: true, 
};

Please note that you need to install @svgr/webpack and url-loader with npm or yarn to use them in your Webpack configuration.

npm install --save-dev @svgr/webpack url-loader
# or
yarn add --dev @svgr/webpack url-loader

And use it like this 😎

import React from "react";
import { ReactComponent as MailIcon } from "@assets/icons/auth/mail.svg";

function Page() {
  return (
    <div>
      {/* Utilizing the configured MailIcon component */}
      <MailIcon strokeWidth={1.2} />
    </div>
  );
}

export default Page;

Fixing SVG Import Issue in TypeScript 🛠️

To resolve the issue, declare a module for SVG files in your TypeScript configuration. This example uses the following code:

// svg.d.ts
declare module "*.svg" {
  import React from "react";
  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
}

[sungjoon0710]

This worked for me too! Thanks!

[issam-seghir]

For Next 15, here’s what has really worked for me:

• next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
    experimental: {
        turbo: {
            rules: {
                "*.svg": {
                    loaders: ["@svgr/webpack"],
                    as: "*.js",
                },
            },
        },
    },
    webpack: (config) => {
        // Add rule for SVG files
        config.module.rules.push({
            test: /\.svg$/,
            use: ["@svgr/webpack", "url-loader"],
        });

        return config;
    },
    reactStrictMode: true,
};

export default nextConfig;

• usage :

import MobileIcon  from "@/assets/icons/mobile.svg";
...

<Button className="gap-2">
        <MobileIcon/>
 </Button>

[jovand3v]

Yeah this one worked, likely the turbo needs to be configured as well for v15

[Kadchenko]

For Next 15, here’s what has really worked for me:

• next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
    experimental: {
        turbo: {
            rules: {
                "*.svg": {
                    loaders: ["@svgr/webpack"],
                    as: "*.js",
                },
            },
        },
    },
    webpack: (config) => {
        // Add rule for SVG files
        config.module.rules.push({
            test: /\.svg$/,
            use: ["@svgr/webpack", "url-loader"],
        });

        return config;
    },
    reactStrictMode: true,
};

export default nextConfig;

• usage :

import MobileIcon  from "@/assets/icons/mobile.svg";
...

<Button className="gap-2">
        <MobileIcon/>
 </Button>

But how in this case i can use svg as url?

import mobileIcon  from "@/assets/icons/mobile.svg";

<Button className="gap-2">
        <Image src={mobileIcon} />
 </Button>

[issam-seghir]

@Kadchenko I think you can't, the idea of using svgr is to embedded the svg as component so you can style it and add animation easily , if you want to use Image component just use an .png or another format version

[Kadchenko]

yeah, you are right, this question is more about turbopack config. So we need somehow avoid using svgr loader for the case importing svg with query parameter ?url like in webpack were we find file loader and apply it to imports with query parameter e.g

webpack(config) {
    // Grab the existing rule that handles SVG imports
    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));

    config.module.rules.push(
      // Reapply the existing rule, but only for svg imports ending in ?url
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/, // *.svg?url
      }
    )
}