Unable to import svg files in typescript

Question

In typescript(*.tsx) files I cannot import svg file with this statement:

import logo from './logo.svg';

Transpiler says:[ts] cannot find module './logo.svg'. My svg file is just <svg>...</svg>.

But in .js file I'm able to import it without any issues with exact the same import statement. I suppose it has something to do with type of svg file which must be set somehow for ts transpiler.

Could you please share how to make this work in ts files?

Answer 1

If you use webpack, you can do this by creating a custom types file.

Create a file named custom.d.ts with the following content:

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

Add the custom.d.ts to tsconfig.json as below

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

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

Answer 2

Thanks smarx for pointing out use require(). So in my case it should be:

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

which works fine in *.tsx files

Answer 3

• If you're using create-react-app 2+: docs

Add a custom.d.ts file (I created it on the root path of my src dir) with the correct type (thanks to RedMatt):

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

Install svg-react-loader or some other, then:

• Use it as the main svg loader
• Or if you're migrating a codebase and don't want to touch the working part (JS) specify the loader on the import:

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

Then just use it as a JSX tag:

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

Answer 4

I scoured the internet looking for a solution to this issue. This stackoverflow question came up as the top lead, but none of the answers worked for me.

Finally, I was able to come to a solution by trying a few different techniques.

1. Create an ./globals.d.ts file in the root of your project, at the same place/level your ./tsconfig.json is.

2. Inside that ./globals.d.ts file, add this:

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

This properly imports the .svg as a string, which is an issue I noticed in the top-rated answer.

3. Update your tsconfig.json with the following:

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

That's it - that got it to work in my case. I will note - this is in a VanillaJS app.

Answer 5

The solution that I found: In ReactJS project, in file react-app-env.d.ts you just remove the space in the comment such as:

Before

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

After

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

I hope to help you

Answer 6

You can declare module for svgs the same way as 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;
}

see source

Answer 7

Solution without webpack and custom.d.ts

For me, none of the above solutions worked alone. Because I don't use the Webpack in my current project.

I investigated the outputs in the log, then the following way worked for me, without creating a file (custom.d.ts), changing the config, or installing a new dependency:

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

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

For svg format you need to add .default, but not for png format.

Answer 8

If you're using the Create-React-App starter, make sure that the react-app-env.d.ts contains the line:

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

Answer 9

Cannot find a module or its corresponding type declarations | Unable to import svg files in typescript

1. Inside that ./custom.d.ts file, add this:

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

Answer 10

I had the same issue while trying out a REACT + typescript tutorial.
What worked for me was the following import statement.

import * as logo from 'logo.svg'

Here are my dependencies in package.json.

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

Hope it helps someone.

Answer 11

Hope! This will help someone.

Actually, I tried all the steps but one thing we have to understand, you have to create the custom.d.ts file into the corresponding SVG import folder.

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"]
}

optional.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;
}

Finally the common export file:

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 a better idea:

Answer 12

If you use vite, adding the following compilerOptions to tsconfig.json fixed the error for me:

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

Answer 13

There's an alternative way of doing this which we've implemented: make your SVGs components. I did this because it bugged me that I was using commonJS require statements alongside my imports.

Answer 14

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

if you are using the puglin slint it may be that he has disabled thinking it was a comment but not to read the svg you need this type script module just disable the line and be happy

Answer 15

This comment helped if you want src functionality as well as being able to make it a react component. https://github.com/parcel-bundler/parcel/discussions/7910#discussioncomment-3690319

This goes in your globals.d.ts 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;

}

Answer 16

If none of the other answers work, try to restart your IDE (i.e. VS Code). In my case, that fixed it.

Answer 17

For me, I had to include react-app-env.d.ts in my tsconfig*.json:

  "include": [
    "src/Router.tsx",        // my main entry point
    "src/global.d.ts",       // global stuff
    "src/react-app-env.d.ts" // react global stuff
  ]

Answer 18

For me it worked when I put the following line in src/types/images.d.ts

declare module '*.svg';

and I'm importing images the following way

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

in tsconfig.json

I have following complierOptions

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

hope it helps someone. I use CRA the newest version.

Answer 19

If you're using Webpack >= v5 and would like to inline your image, this would perfectly work for you:

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

function MyComponent() {
  return (
    <img src={logo} />  // <img src="data:image/svg+xml;base64,..." />
  );
}

In webpack.config.js add the following changes:

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

And yeah, also please note it might not work if your Content-Security-Policy header is set to strict options (e.g. only 'self') so it wouldn't allow inline images.

In that case you'll see a "broken" image on the web-page and a warning in the Dev Tools Console. To fix, just add data: into Content-Security-Policy setup, like this:

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

Answer 20

If you're using NextJs ^13 with TypeScript, this should help you out:

npm install --save-dev @svgr/webpack

Since NextJs uses webpack, we need this plugin to process svg files and use those file import as React components. Learn more about svgr webpack plugin.

Then, open your next.config.* file, and add this webpack config to 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;
  }
};

Now, we need to override type definition for svg file content. It shouldn't be any but a proper component definition.

Create a custom .d.ts file anywhere in your project with the following content:

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

We also need to import this file in typescript config file - tsconfig.json:

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

Our custom declaration file should be included before next-env.d.ts. This order is important.

We should be good now.

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

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

Answer 21

If you use webpack, install svg-inline-loader, add the module in the webpack.config.js:

{
    test: /\.svg$/,
    loader: 'svg-inline-loader',
}

It works well after building.

If your IDE reports an interactively error, it can solved by adding //@ts-ignore:

//@ts-ignore
import logo from './logo.svg';

svg-inline-loader webpack docs

Answer 22

Import an SVG file in a CRA app

If you want to import an SVG file in a CRA app (create-react-app), without doing any config, you can use these methods:

TypeScript Files

import myIconFileName from './assets/images/my-icon.svg';
...    
<img src={myIconFileName} />

JS Files

import { ReactComponent as MyIcon } from "./assets/images/my-icon.svg";
...
<MyIcon />