#using SVG as react component in NextJs app router

26 messages · Page 1 of 1 (latest)

marsh dagger
#

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;
bitter fractalBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

tight fox
#

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;
marsh dagger
tight fox
#

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.

marsh dagger
tight fox
#

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.

marsh dagger
tight fox
#

sure

marsh dagger
# tight fox sure

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

image.png
#

@tight fox you there

tight fox
#

yes

#

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

marsh dagger
#

sure

# 
    at Object.webpack (file:///D:/React/Dragoguard-Dashboard/next.config.js:16:51)
    at getBaseWebpackConfig (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\[email protected]_@[email protected][email protected][email protected]\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\[email protected]_@[email protected][email protected][email protected]\node_modules\next\dist\trace\trace.js:140:20)
    at async Span.traceAsyncFn (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\[email protected]_@[email protected][email protected][email protected]\node_modules\next\dist\trace\trace.js:140:20)
    at async HotReloader.start (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\[email protected]_@[email protected][email protected][email protected]\node_modules\next\dist\server\dev\hot-reloader-webpack.js:595:37)
    at async startWatcher (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\[email protected]_@[email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-utils\setup-dev-bundler.js:1151:5)
    at async setupDevBundler (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\[email protected]_@[email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-utils\setup-dev-bundler.js:1757:20)
    at async initialize (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\[email protected]_@[email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-server.js:69:30)
    at async Server.<anonymous> (D:\React\Dragoguard-Dashboard\node_modules\.pnpm\[email protected]_@[email protected][email protected][email protected]\node_modules\next\dist\server\lib\start-server.js:236:36)
image.png
tight fox
#

give me screen sort of index.ts ?

marsh dagger
tight fox
#

This is a directory structure

image.png
# 
// 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;
marsh dagger
tight fox
# 
//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;
marsh dagger
tight fox