One way to accomplish this task with webpack is by creating a specialized types file.

To start, generate a new file called custom.d.ts and include the following code:

declare module "*.svg" {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

Next, append the custom.d.ts file to your tsconfig.json like so:

"include": ["src/components", "src/custom.d.ts"]

Reference: https://webpack.js.org/guides/typescript/#importing-other-assets

Appreciation to smarx for highlighting the use of require(). In my specific scenario, I found success with the following code:

const logo = require("./logo.svg") as string;

This implementation functions effectively within *.tsx files.

• If you are working with create-react-app 2+: documentation

Create a file named custom.d.ts (I placed it in the root directory of my src folder) with the appropriate type definitions (credit to RedMatt):

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

Install svg-react-loader or an alternative like this, then:

• Use it as your main svg loader
• Or if you are migrating code and prefer not to modify the working section (JS), specify the loader during import:

import MySVG from '-!svg-react-loader!src/assets/images/name.svg'

Now simply utilize it as a JSX tag:

function f() { 
  return (<MySVG />); 
}

After extensive research across various online sources, I came across a stackoverflow query that seemed to have the solution to my problem. However, none of the suggested answers provided a resolution for me.

Determined to find a fix, I experimented with different approaches until I finally arrived at a successful solution.

1. To tackle the issue, I created an ./globals.d.ts file in the root directory of my project, located alongside the ./tsconfig.json file.

2. Within the newly created ./globals.d.ts file, I included the following code snippet:

declare module '*.svg' {
  const content: string;
  export default content;
}

This allowed me to import the .svg files as strings, addressing a discrepancy highlighted in the highest-rated response on Stack Overflow.

3. To finalize the setup, I updated my tsconfig.json with the specified configuration:

{
  "files": ["globals.d.ts"]
}

Following these steps successfully resolved the issue within my VanillaJS application.

The solution that has been discovered: Within a ReactJS project, navigate to the file react-app-env.d.ts and simply remove the space in the comment section like so:

Before

// / <reference types="react-scripts" />

After

/// <reference types="react-scripts" />

This solution aims to assist you in resolving the issue.

To define a module for SVGs, you can follow the same approach used in create-react-app:

react-app.d.ts

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

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

  const src: string;
  export default src;
}

Refer to the source code for more details.

Issue with module and type declarations when importing svg files in TypeScript

1. To resolve this problem, update your ./custom.d.ts file with the following code:

declare module '*.svg' {
  const data: string;
  export default data;
}

When utilizing vite, incorporating the specified compilerOptions into your tsconfig.json resolved the issue I was experiencing:

  "compilerOptions": {
    "types": ["vite/client", "node"],

Resolving the Issue without Webpack and custom.d.ts

None of the previously suggested solutions worked for me individually as I am not using Webpack in my current project.

After examining the log outputs, I discovered a workaround that worked for me without having to create a custom.d.ts file, modify the configuration, or install any new dependencies:

const logo: string = require("../assets/images/logo.svg").default;

<img src={logo} alt="logo" />

When dealing with SVG files, remember to add .default, but this is not necessary for PNG files.

When starting with the Create-React-App template, ensure that your react-app-env.d.ts file includes the following line:

/// <reference types="react-scripts" />

Believe in the power of hope to assist others.

After attempting all the outlined steps diligently, it is crucial to note that the creation of a custom.d.ts file within the designated SVG import folder is essential.

Here is an excerpt from the ts config file:

{
  "compilerOptions": {
    "target": "ES6",
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "Node",
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"],
      "@styles/*": ["src/styles/*"],
      "@static/*": ["src/static/*"]
    },
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["src/**/*", "src/static/optional.d.ts"],
  "exclude": ["node_modules", "build"]
}

Include this code snippet in your optional.d.ts file:

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

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

    const src: string;
    export default src;
}

Lastly, here's the consolidated export file for convenience:

import Logo from './images/logo.svg';
import BellDot from './images/bell-dot.svg';
import Logout from './images/logout.svg';
import pageNotFound from './images/page-not-found.png';

export {
    Logo,
    BellDot,
    pageNotFound,
    Logout
}

For further insights, refer to this image link.

For those looking to add src functionality and turn it into a react component, check out this helpful comment: https://github.com/parcel-bundler/parcel/discussions/7910#discussioncomment-3690319

To implement this, simply include the following code in your globals.d.ts file at the same level as your tsconfig.json:

declare module '*.svg' {
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;

}

During my exploration of a REACT + typescript tutorial, I encountered a similar issue.
The solution for me was to use the following import statement.

import * as logo from 'logo.svg'

Below are the dependencies listed in my package.json file.

  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts-ts": "3.1.0"
  },
  "devDependencies": {
    "webpack": "^4.0.0"
  }

Hopefully, this information proves helpful to someone else facing a similar dilemma.

One approach we've taken is to transform SVGs into components. I found it cumbersome to mix commonJS require with ES6 import.

    // eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />

For those using the plugin slint, it may have been disabled thinking it was a comment. However, in order to read the SVG, you will need this TypeScript module. Simply disable the line and enjoy!

For those utilizing NextJs ^13 in conjunction with TypeScript, here's a helpful guide:

npm install --save-dev @svgr/webpack

As NextJs employs webpack, it's essential to utilize this plugin for processing svg files and incorporating them as React components through file imports. Additional details can be found here about the svgr webpack plugin.

Subsequently, edit your next.config.* file and insert this webpack configuration into the next config:

module.export = {
 // other config values

 webpack(config) {
   config.module.rules.push({
     test: /\.svg$/i,
     issuer: { and: [/\.(js|ts|md)x?$/] },
     use: ['@svgr/webpack'],
   });
   return config;
  }
};

Next, we need to redefine the type definition for svg file content. It should not merely be any, but rather a precise component definition.

Create a customized .d.ts file within your project containing the subsequent code:

// custom.d.ts
declare module '*.svg' {
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}

Moreover, ensure you import this file in your typescript configuration file - tsconfig.json:

"include": [
 "types/custom.d.ts",
 "next-env.d.ts"
]

The custom declaration file must be included prior to next-env.d.ts. The sequence is crucial.

Everything should now be set up correctly.

import SvgLogo from 'path/to/logo.svg';

function App() {
   return (
      <SvgLogo />
   );
}

If you're still facing issues, attempt to reboot your Integrated Development Environment (such as VS Code). This method worked for me personally.

In order to successfully set up my project, I found it necessary to add react-app-env.d.ts to my tsconfig*.json:

  "include": [
    "src/Router.tsx",        // primary entry point
    "src/global.d.ts",       // global elements
    "src/react-app-env.d.ts" // react specific components
  ]

To get it working for me, I had to add the following line to src/types/images.d.ts

declare module '*.svg';

Then, I imported images like this:

import { ReactComponent as WifiIcon } from '../../../assets/images/Wifi.svg';

In my tsconfig.json file,

I specified the following compilerOptions:

"compilerOptions": {
    "typeRoots": ["node_modules/@types", "src/types"]
}

Hopefully this can benefit someone else trying to achieve the same. I am using the latest version of CRA.

When working with React Native version "0.72.6",

You can create a file named ./globals.d.ts in the main directory of your project, where your tsconfig.json is located.

Include the following lines in globals.d.ts:

declare module '*.svg' {
  const content: string;
  export default content;
}

Avoid adding this information to your tsconfig.json file.

To use it, import like this:

import SVG_google from '.SVG_google.svg';

Need a solution for incorporating SVG files in Vue.js? Look no further! This "svg.d.ts" file contains the code you need to resolve any errors and ensure proper recognition of imported SVG as an actual <svg> element:

declare module '*.svg' {
  import type { SVGAttributes, DefineComponent } from 'vue';

  const content: DefineComponent<SVGAttributes>;
  export default content;
}

For those utilizing Webpack version v6 or higher and aiming to embed an image directly into their code, this method will suit your needs:

const picture = require('./picture.png') as string;

function DisplayImage() {
  return (
    <img src={picture} />  // <img src="data:image/png;base64,..." />
  );
}

To implement this in your webpack.config.js, make the following adjustments:

module: {
  rules: [
    // inline png files (refer to https://webpack.js.org/guides/asset-modules/)
    {
      test: /\.png/,
      type: 'asset/inline'
    }
  ]
}

Keep in mind that if your website has a strict Content-Security-Policy with limited options (e.g. only 'self'), the image may not render properly due to restrictions on inline content.

In such a scenario, you might encounter a broken image display on your webpage along with a warning in the Developer Tools Console. To resolve this issue, include data: in your Content-Security-Policy setup, like so:

Content-Security-Policy: img-src 'self' data:

When utilizing esbuild, it is necessary to include the loader parameter in the esbuild.build function as shown below:

import esbuild from 'esbuild'
await esbuild.build({
  loader: {
    '.svg': 'dataurl',
  },
})