Can't import svg -- needs declaration

[ramiel]

What happens and why it is wrong

I'm trying to include an SVG inside my tsx file. Something like

import thumbUp from './svg/thumb-up.svg';

export const ThumbUp = (props: IconProps) => <BaseIcon {...props} svg={thumbUp} />

In order to have the svg file I'm using rollup-svgo plugin as you can see in the rollup config below.

I have the error

semantic error TS2307: Cannot find module './svg/thumb-up.svg'

Environment

Versions

• typescript: 3.5.2
• rollup: 1.16.4
• rollup-plugin-typescript2: 0.21.2

rollup.config.js

import typescript from "rollup-plugin-typescript2";
import svgo from 'rollup-plugin-svgo'
import pkg from "./package.json";

export default [
  {
    input: "src/index.ts",
    external: [
      'reakit',
      ...Object.keys(pkg.peerDependencies || {})
    ],
    plugins: [
      svgo(),
      typescript({ }),
    ],
    output: [
      { file: pkg.main, format: "cjs" },
      { file: pkg.module, format: "es" },
    ]
  },
];

tsconfig.json

package.json

plugin output with verbosity 3

[ezolenko]

That's typescript saying it doesn't have a typing information for that svg file. You can either add //@ts-ignore above the import to silence the error, or you can use declare module './svg/thumb-up.svg' { ... } to actually define the typings.

[ramiel]

Thank you. My bad, I thought it was a plugin issue. Fixed, great!

[agilgur5]

See also this StackOverflow question for more ways of creating declarations for SVGs depending on your stack etc