How to import images in Typescript

Normally, when Typescript cannot find something we get this error:

```
Cannot find module [your module] or its corresponding type declarations ts(2307)
```

Now let's see how we can fix this, with a simple example.
Given the following folder structure:

```
│── src
│   ├── resources
│   │   ├── ts
│   │   │   ├── **/*.ts
│   │   ├── images
│   │   │   ├── logo.svg
├── ...
├── tsconfig.json

```

In order to be able to achieve something like this:

```
import Logo from '[path]/images/logo.svg'

```
without any ** Typescript errors**, we need to follow these steps:

### 1.Make sure that the `images` folder is "reachable" by Typescript.

Adding this inside **`tsconfig.json`** will do the trick:
```js
{
  "include": [
        ...
        "resources/**/*.ts",
   ],
}

```

A configuration like this one **will not do**:
```js
{
  "include": [
      "resources/ts/**/*.ts",
   ],
}
```
Because **images/** is not included in **ts/** and we don't have any other folders declared, so Typescript can't "reach" it.

### 2.Let Typescript know about the `.svg` type in that folder.

In the root of the images folder create a file called **`index.d.ts`**:

```
...
├── resources
│   ├── ts
│   │   ├── **/*.ts
│   ├── images
│   │   ├── logo.svg
│   │   ├── index.d.ts
...
```

With the following contents:
```ts
declare module '*.svg' {
  const value: any;
  export = value;
}
```

Now you should be good to go.

Denisa Halmaghi
07 Dec 2021