TypeScript ne voit pas les SVG ? Résolvons le problème une fois pour toutes

Introduction : "Cannot find module" — une douleur familière ?

Vous codez en TypeScript, ajoutez à votre projet une belle icône au format SVG et essayez de l'importer de manière standard :

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

Et là, TypeScript vous affiche une erreur rouge :

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

Familiar ? Si vous avez déjà rencontré ce problème au moins une fois, vous n'êtes pas seul. La question "Unable to import svg files in typescript" sur Stack Overflow a recueilli des milliers de vues et des dizaines de réponses. Le problème est que TypeScript, par défaut, ne sait pas comment traiter les fichiers non-code (SVG, PNG, CSS).

Dans cet article, nous allons voir une explication complète avec du code : pourquoi l'erreur se produit et comment la corriger une fois pour toutes. Vous découvrirez les declaration files, la configuration de Webpack et Vite, ainsi que la manière de typer correctement les SVG dans les projets React.

Pourquoi TypeScript ne voit-il pas les SVG ?

TypeScript est un langage fortement typé. Il vérifie les types lors de la compilation. Lorsque vous écrivez import Logo from './logo.svg', TypeScript s'attend à ce que le module ./logo.svg exporte quelque chose avec un type connu. Mais un SVG n'est pas un fichier TypeScript, c'est du XML. TypeScript n'a pas de description intégrée pour les modules SVG.

D'où l'erreur : le compilateur ne peut pas trouver les type declarations (déclarations de types) pour ce fichier.

Il existe trois méthodes principales pour résoudre le problème :

\n
• Méthode 1 : Créer un fichier de déclaration global (.d.ts)
\n
• Méthode 2 : Utiliser Webpack/Vite avec les bons loaders
\n
• Méthode 3 : Importer le SVG via url ou raw (pour des cas spécifiques)
\n

Nous allons détailler chaque méthode avec des exemples de code.

Méthode 1 : Fichier de déclaration global (le plus populaire)

Cette solution issue de Stack Overflow fonctionne dans 90% des cas. Vous créez un fichier avec l'extension .d.ts (par exemple, src/declarations.d.ts ou src/svg.d.ts) et vous déclarez le module pour les SVG.

Voici le code minimal :

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

Que se passe-t-il ici ? Nous disons à TypeScript : "Tout fichier avec l'extension .svg est un module qui exporte par défaut une chaîne de caractères (chemin vers le fichier ou contenu)."

Si vous utilisez React et souhaitez importer un SVG en tant que composant React (via @svgr/webpack ou vite-plugin-svgr), la déclaration sera différente :

// 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 : Assurez-vous que le fichier .d.ts est inclus dans votre tsconfig.json. Généralement, il suffit qu'il se trouve dans le dossier src/, mais si ce n'est pas le cas, ajoutez le chemin dans le champ include :

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

Après cela, l'erreur "Cannot find module" disparaîtra et vous pourrez importer les SVG comme d'habitude.

Méthode 2 : Configuration de Webpack ou Vite

La déclaration globale n'est que la moitié du travail. Pour que l'import fonctionne réellement à l'exécution (dans le navigateur), vous devez configurer le bundler.

Pour Webpack

Installez file-loader ou url-loader :

npm install --save-dev file-loader

Ajoutez une règle dans webpack.config.js :

// webpack.config.