Replies: 3 comments 7 replies
-
To handle an SVG file in React and use it as both a React component and as an image source in the
import {ReactComponent as Google} from 'assets/google.svg'; Make sure you have installed the necessary packages to handle SVG files, such as
function GoogleComponent() {
return (
<div>
<Google />
</div>
);
} Now, the SVG will be rendered as a React component in the DOM.
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 That's it! Now you can handle the SVG file as both a React component and an image source in your React application. |
Beta Was this translation helpful? Give feedback.
-
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>>;
} |
Beta Was this translation helpful? Give feedback.
-
For Next 15, here’s what has really worked for me:
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;
import MobileIcon from "@/assets/icons/mobile.svg";
...
<Button className="gap-2">
<MobileIcon/>
</Button> |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
I was trying to use my custom SVG and I added those SVG within
public
orassets
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
Beta Was this translation helpful? Give feedback.
All reactions