TypeScript doesn't see SVG? Solving the problem once and for all

Introduction: "Cannot find module" — a familiar pain?

You are writing in TypeScript, add a beautiful SVG icon to your project, and try to import it in the standard way:

import Logo from './assets/logo.svg';

And then TypeScript gives you a red error:

Cannot find module './assets/logo.svg' or its corresponding type declarations.

Familiar? If you have ever encountered this problem — you are not alone. The question "Unable to import svg files in typescript" on Stack Overflow has gathered thousands of views and dozens of answers. The problem is that TypeScript by default does not know how to handle non-code files (SVG, PNG, CSS).

In this article, we will break down a complete explanation with code: why the error occurs and how to fix it once and for all. You will learn about declaration files, configuring Webpack and Vite, and how to properly type SVG in React projects.

Why doesn't TypeScript see SVG?

TypeScript is a strictly typed language. It checks types at compile time. When you write import Logo from './logo.svg', TypeScript expects the module ./logo.svg to export something with a known type. But SVG is not a TypeScript file; it is XML. TypeScript has no built-in description for SVG modules.

Hence the error: the compiler cannot find type declarations for this file.

There are three main ways to solve the problem:

\n
• Method 1: Create a global declaration file (.d.ts)
\n
• Method 2: Use Webpack/Vite with the correct loaders
\n
• Method 3: Import SVG via url or raw (for specific cases)
\n

We will cover each method with code examples.

Method 1: Global declaration file (most popular)

This is the Stack Overflow solution that works in 90% of cases. You create a file with the extension .d.ts (e.g., src/declarations.d.ts or src/svg.d.ts) and declare a module for SVG.

Here is the minimal code:

// src/declarations.d.ts\ndeclare module '*.svg' {\n  const content: string;\n  export default content;\n}

What is happening here? We are telling TypeScript: "Any file with the extension .svg is a module that exports a string by default (the file path or content)."

If you are using React and want to import SVG as a React component (via @svgr/webpack or vite-plugin-svgr), the declaration will be different:

// src/declarations.d.ts\ndeclare module '*.svg' {\n  import React from 'react';\n  const SVGComponent: React.FC<React.SVGProps<SVGSVGElement>>;\n  export default SVGComponent;\n}

Important: Make sure the .d.ts file is included in your tsconfig.json. Usually, it is enough if it is inside src/, but if not — add the path to the include field:

// tsconfig.json\n{\n  "compilerOptions": {\n    // ... other settings\n  },\n  "include": ["src/**/*"]\n}

After this, the "Cannot find module" error will disappear, and you will be able to import SVG as usual.

Method 2: Configuring Webpack or Vite

The global declaration is only half the battle. To make the import actually work at runtime (in the browser), you need to configure the bundler.

For Webpack

Install file-loader or url-loader:

npm install --save-dev file-loader

Add a rule to webpack.config.js:

// webpack.config.