Unable to import svg files in typescript

Unable to Import SVG Files in TypeScript? Here's the Solution! 🎨

So, you are trying to import an SVG file in your TypeScript project, but facing some annoying errors? Fret not! We've got you covered. In this article, we will address common issues and provide you with easy solutions to help you successfully import SVG files in your TypeScript code. 👍

The Problem ❓

You are trying to import an SVG file in a TypeScript file (*.tsx), using the following statement:

import logo from './logo.svg';

However, the transpiler throws an error with the message:

[ts] cannot find module './logo.svg'.

Meanwhile 🕵️, you notice that in a .js file, you can import the SVG file without any issues using the exact same import statement. Why is that? What's going on? 🤔

The Solution 💡

The problem lies in TypeScript's default behavior, which does not know how to handle SVG files by default. But worry not, there's a way to get around this! Follow these simple steps to resolve the issue:

Step 1: Install the Required Dependencies

To import SVG files in your TypeScript code, you need to install the appropriate dependencies. Open your terminal and run the following command:

npm install --save-dev @svgr/webpack typescript-plugin-svgr

Step 2: Configure TypeScript

Now that we have the necessary dependencies, it's time to update our TypeScript configuration. Add the following code to your tsconfig.json file:

{
  "compilerOptions": {
    "jsx": "react",
    "plugins": [
      {
        "name": "typescript-plugin-svgr"
      }
    ]
  }
}

Step 3: Retry the Import

You're almost there! Go ahead and run your TypeScript code again. The import statement:

import logo from './logo.svg';

should now work without any errors. TypeScript will recognize the SVG file and successfully import it.

Congratulations! 🎉

You have successfully resolved the issue and can now import SVG files in your TypeScript project seamlessly. Feel free to celebrate with your favorite dance moves! 💃

Conclusion and Next Steps 🚀

Today, we learned how to overcome the hurdle of importing SVG files in TypeScript. You can now apply this knowledge to your current and future projects without any hassle. Don't forget to share this article with your fellow developers who might be struggling with the same issue.

If you have any more questions or face any other coding problems, feel free to reach out in the comments section below. We'd love to help you out!

Happy coding! 👩‍💻👨‍💻