using SVG as react component in NextJs app router

Unanswered

Aditya Kirad posted this in #help-forum

2023-12-05T05:28:38.000Z

hey folks can anyone help me in using the SVG in NextJs as react component I'm using the @svgr/webpack and app router and here is my next-config.js file but it's not working can anyone tell me what I'm doing wrong

await import("./src/env.js");

/** @type {import("next").NextConfig} */
const config = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/i,
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

export default config;

25 Replies

Rain infotech

2023-12-05T05:46:47.000Z

I would like to propose a solution for the challenge you're facing

// next.config.js
const withImages = require('next-images');

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

    if (!isServer) {
      config.resolve.alias['@components'] = path.resolve(__dirname, 'components');
      // Add any other aliases or configurations as needed
    }

    return config;
  },
});

Now you can use SVG files as React components in your code:

// components/Svgimage.js
import YourIcon from '@components/YourIcon.svg';

const Svgimage = () => {
  return (
    <div>
      <h1>Your Component</h1>
      <YourIcon width={50} height={50} />
     </div>
  );
};

export default Svgimage;

@Rain infotech I would like to propose a solution for the challenge you're facing javascript // next.config.js const withImages = require('next-images'); module.exports = withImages({ webpack(config, { isServer }) { config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'], }); if (!isServer) { config.resolve.alias['@components'] = path.resolve(__dirname, 'components'); // Add any other aliases or configurations as needed } return config; }, }); Now you can use SVG files as React components in your code: javascript // components/Svgimage.js import YourIcon from '@components/YourIcon.svg'; const Svgimage = () => { return ( <div> <h1>Your Component</h1> <YourIcon width={50} height={50} /> </div> ); }; export default Svgimage;

Aditya KiradOP

2023-12-05T06:00:00.000Z

what is the purpose of next-images here

Rain infotech

2023-12-05T06:09:22.000Z

next-images is used to enhance the image handling capabilities of Next.js. It extends Next.js' built-in image support and provides additional features for importing and handling various image formats in your Next.js application.

@Rain infotech next-images is used to enhance the image handling capabilities of Next.js. It extends Next.js' built-in image support and provides additional features for importing and handling various image formats in your Next.js application.

Aditya KiradOP

2023-12-05T06:11:01.000Z

is this necessary for the svgs

Rain infotech

2023-12-05T06:12:20.000Z

No, it is not strictly necessary to use next-images specifically for handling SVG files in Next.js. The @svgr/webpack loader can be configured directly without next-images.

@Rain infotech No, it is not strictly necessary to use next-images specifically for handling SVG files in Next.js. The @svgr/webpack loader can be configured directly without next-images.

Aditya KiradOP

2023-12-05T06:14:26.000Z

let's see if it works without using next-images

Rain infotech

2023-12-05T06:14:53.000Z

sure

@Rain infotech sure

Aditya KiradOP

2023-12-05T06:19:11.000Z

after replacing my config with your provided config the server is not even starting

Aditya KiradOP

2023-12-05T06:27:18.000Z

@Rain infotech you there

Rain infotech

2023-12-05T06:29:03.000Z

yes

Could you please give me screen sort of next.config.js ?

Aditya KiradOP

2023-12-05T06:29:58.000Z

sure

ReferenceError: path is not defined
    at Object.webpack (file:///D:/React/Dragoguard-Dashboard/next.config.js:16:51)
    at getBaseWebpackConfig (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\next@14.0.3_@babel+core@7.23.5_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\build\webpack-config.js:1727:32)
    at async Promise.all (index 0)
    at async Span.traceAsyncFn (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\next@14.0.3_@babel+core@7.23.5_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\trace\trace.js:140:20)
    at async Span.traceAsyncFn (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\next@14.0.3_@babel+core@7.23.5_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\trace\trace.js:140:20)
    at async HotReloader.start (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\next@14.0.3_@babel+core@7.23.5_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\hot-reloader-webpack.js:595:37)
    at async startWatcher (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\next@14.0.3_@babel+core@7.23.5_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-utils\setup-dev-bundler.js:1151:5)
    at async setupDevBundler (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\next@14.0.3_@babel+core@7.23.5_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-utils\setup-dev-bundler.js:1757:20)
    at async initialize (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\next@14.0.3_@babel+core@7.23.5_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:69:30)
    at async Server.<anonymous> (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\next@14.0.3_@babel+core@7.23.5_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\start-server.js:236:36)

Rain infotech

2023-12-05T06:34:59.000Z

give me screen sort of index.ts ?

@Rain infotech give me screen sort of index.ts ?

Aditya KiradOP

2023-12-05T06:36:37.000Z

from which I'm exporting my svgs right

Rain infotech

2023-12-05T07:00:40.000Z

This is a directory structure

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

        return config;
    },
};

module.exports = config;

<!-- components/YourIcon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100" height="100" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10" />
  <circle cx="8" cy="14" r="1" />
  <circle cx="16" cy="14" r="1" />
  <line x1="9" y1="9" x2="9.01" y2="9" />
  <line x1="15" y1="9" x2="15.01" y2="9" />
</svg>

// components/YourIcon.tsx

import React from 'react';
import YourSvgIcon from '@/components/YourSvgIcon.svg';

const SvgComponent: React.FC = () => {
    return (
        <div>
            <h1>SVG Component Example</h1>
            <YourSvgIcon width={48} height={48} />
        </div>
    );
};

export default SvgComponent;

@Rain infotech This is a directory structure

Aditya KiradOP

2023-12-05T07:03:02.000Z

this same directory structure I have

Rain infotech

2023-12-05T07:03:33.000Z

//page.tsx
import React from 'react';
import SvgComponent from './components/YourIcon';

const HomePage: React.FC = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <SvgComponent />
    </div>
  );
};

export default HomePage;

@Rain infotech javascript // components/YourIcon.tsx import React from 'react'; import YourSvgIcon from '@/components/YourSvgIcon.svg'; const SvgComponent: React.FC = () => { return ( <div> <h1>SVG Component Example</h1> <YourSvgIcon width={48} height={48} /> </div> ); }; export default SvgComponent;

Aditya KiradOP

2023-12-05T07:04:07.000Z

the only difference is that I have stored the svg in a seperate folder inside the components foler _components/svgs/...

@Aditya Kirad this same directory structure I have

Rain infotech

2023-12-05T07:05:25.000Z

use this import YourSvgIcon from '@/_components/svgs/Hammer.svg'; for get file

@Rain infotech javascript // next.config.js const config = { webpack: (config) => { config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'], }); return config; }, }; module.exports = config;

Rain infotech

2023-12-05T07:05:55.000Z

and also change next.config.js like this