How to use SVG as React component with Typescript?

[michox]

Hello, I would like to use some .svg files as React components in my project but I don't know how to realize that and there is no documentation on the topic.

in my .ts file I try import Icon from "./Icon.svg" and my .parcelrc is

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.svg": ["...", "@parcel/transformer-svg-react"]
  }
}

however when I try to build I get @parcel/transformer-typescript-types: Cannot find module './Icon.svg' or its corresponding type declarations.
I have tried adding a .svgrc to the root directory to configure SVGR which this module is running on and set it to {"typescript":true} but to no avail...
I now settled on using SVGR manually to generate react components but I would prefer not to do that for each parcel project I work with.
Did anybody manage to compile SVG with Typescript into react components?

[onionhammer]

Another fun thing I'm seeing with this scenario is that parcel will just get stuck spinning with "Building index.js...." until I quit.

As far as the types go, it looks like you can add this to a .d.ts file to fix the import

declare module "*.svg" {
  import * as React from "react";

  const ReactComponent: React.FunctionComponent<
    React.SVGProps<SVGSVGElement> & { title?: string }
  >;

  export default ReactComponent;
}

[samjt]

I have discovered a workaround to get svg typescript generation working: #8376

[spiropoulos94]

You should try including this in your custom.d.ts file which should be placed inside src/

  import React = require('react');
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

And then add "include": ["src", "src/custom.d.ts"] on the top level of your tsconfig.json

After these steps, you should actually import any SVG as a ReactComponent like this:

import { ReactComponent as CustomComponentName } from '../../assets/svg-file.svg';

[Khun111]

How do you give it a className this way tho. Having issues styling my svgs even just changing colors. But this just might work since declared the props in your d.ts

[Khun111]

i Keep getting this error tho
CustomerDashboard.tsx:4 Uncaught SyntaxError: The requested module '/images/close.svg?import' does not provide an export named 'ReactComponent' (at CustomerDashboard.tsx:4:10)

[0tii]

Just create a new Component and return the svg as html elements. Pass down className if needed.

import React from "react";

interface SearchIconAttributes {
    className?: string,
}

export const SearchIcon: React.FC<SearchIconAttributes> = ({ className = '' }: SearchIconAttributes) => {
    return (
        <svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox={`0 0 48 48`} >
            <path d="M 20.5 6 C 12.515556 6 6 [...] 10 20.5 10 z" />
        </svg>
    );
}

This is just copied from one of my projects, and it's working perfectly fine. No tedious declaration file shenanigans, or using custom file loaders.

[NenadoPL1Z]

You're right, it works, but it ends up with implicit code duplication. If you have a github.svg file and a githubIcon.tsx file that returns the copied layout from the github.svg file. This is bad practice since the IDE doesn't render icons in .tsx files, you lose the dynamic transformation. If suddenly the icon changes, then you need to copy the contents again, and not just replace the .svg file

Created with google translator

[McSoud]

But the thing is if you are using a css library like tailwind you will not be getting the intellisense and auto-complete of the ide like vs-code so taking the svgprops type and resting the ...props in the parent svg react node you will have type completion such as fill attribute and dom events

[aaronguilford]

add a file with .d.ts extension, i used image.d.ts, put in src.

declare module '*.svg' {
const content: Element<React.SVGAttributes>;
export default content;
}

make sure ./src is in your include in ts.config.

should also have the dom types there too, "lib": ["DOM", "DOM.Iterable", "ESNext"],

can then import like:

import AvatarImage from '../../../assets/img/pexels-linkedin-sales-navigator-2182970@2x.png';
import AvatarImage from '../../../assets/img/pexels-linkedin-sales-navigator-2182970@2x.svg;

[7hourspg]

For NextJS ⛷️

Configuration for SVG Handling in Next.js 🚀

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

//next.config.mjs
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>>;
}

For ReactJs 🏊

Integrating SVG as React Component in React Application 🚀

To seamlessly use SVG files as React components in your React application, follow these steps:

Install Necessary Packages

You need to install @svgr/webpack and url-loader as development dependencies. Use npm to install them:

npm install --save-dev @svgr/webpack url-loader

Create a webpack configuration file (e.g., webpack.config.js) and add the following code:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader'],
      },
    ],
  },
};

Now, you can import SVG files and use them as React components in your application. For example:

import { ReactComponent as Logo } from './path/to/your/logo.svg';

function App() {
  return (
    <div>
      {/* Logo is your SVG as a React component */}
      <Logo />
    </div>
  );
}

export default App;

[beforedisappear]

what about svg in css files? "background: url(...)" doesn't work
This config didn't help me

[AnweshGangula]

Thank you for this. I needed to ass svg.d.ts for this to work. Also checkout the following stack overflow answer which has a better approach