Svgr: Usage with TypeScript

[atdrago]

Hello, all. I believe I'm having a TypeScript issue with SVGR. I've setup the svgr/webpack plugin which is working correctly, but:

When I import an SVG into a .tsx file like so:

import Icon from 'assets/icon.svg';

export default () => (<Icon />);

I get this error from TypeScript:

error TS2307: Cannot find module 'assets/icon.svg'

I was able to fix the issue by adding an index.d.ts file to the root of my "assets" folder with these contents:

declare module '*.svg' {
    const value: React.StatelessComponent<React.SVGAttributes<SVGElement>>;
    export default value;
}

I'm fairly new to TypeScript so I'm not sure the above is the "correct" solution, but it allows me to write <Icon /> and <Icon attr="#fff" /> (where attr is any valid SVG attribute). It might be worth adding something like this to the module itself. Is there any interest in adding TypeScript support to this project?

Thank you so much for this module! ❤️

[atdrago]

I needed to use the above type, so I created an SvgrComponent interface for it:

interface SvgrComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}

declare module '*.svg' {
    const value: SvgrComponent;
    export default value;
}

It's then global, and can be used elsewhere for things like type assertions:

const MySvg = mySvgProp as SvgrComponent;
<MySvg />

[gregberge]

Thanks for reporting it! I do not use TypeScript myself, this is why this package is not TypeScript friendly. If a TypeScript expert could give a look at this issue and maybe propose a mention about TypeScript in the README it would be very nice!

[developer-lindner]

A TypeScript example would be nice:

[atdrago]

@developer-lindner This seems more like a JSX issue than a TypeScript issue. In other words, it looks like Webpack doesn't understand it needs to parse this as JSX. If you're already working with .tsx files, it's possible you just need to change the extension on your file to .tsx, but it's hard to say. A little more information about how you're using SVGR would be helpful. Are you using the CLI to generate these components?

[JorritPosthuma]

I changed the extension to tsx and use the following template, which works for me.
Note: This template ignores the expandProps and ref options (I didn't need them). It also doesn't have the webpack specific code from the original template (see https://github.com/smooth-code/svgr/blob/master/src/transforms/wrapIntoComponent.js)

Running svgr

svgr --ext tsx --template svgrTypescript.js

svgrTypescript.js

module.exports = () => {
    return (code, state) => {
        return `import * as React from 'react'\n\n` +
               `const ${state.componentName} = (props: any) => ${code}\n\n` +
               `export default ${state.componentName}`;
    }
};

I'll try to find time to make a more complete template, and create a PR. But as a disclaimer, I'm by no means a TS expert (day 2 :P)

[MarquesDev]

Hello everyone :)

I'm working on implementing this feature, I think it will be ready in two days :)

[gregberge]

@MarquesDev nice! I have just released v2!

[kelly-tock]

@neoziro @MarquesDev is there a TS specific feature I can help with? we are wanting to turn on noImplicitAny and can't. the template above accomplishes this, but I would think that if there were a ts option the : any would suffice.

[MarquesDev]

@kelly-tock Hello !

I'm not a user of ts but i'm working on implementig this feature.

You can see it in this PR #130.

The CI does'nt allow the merge because the code covering is not good enough.

But if you want, or have time, you can fork this PR and complete the code covering.

I don't know when I will have the time to do it.

[gregberge]

See #89.

[a7madgamal]

interface SvgrComponent extends React.StatelessComponent> {}

declare module '*.svg' {
const value: SvgrComponent;
export default value;
}

thanks! I made a slightly improved version to avoid using as

interface SvgrComponent
  extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}

declare module "*.svg" {
  const ReactComponent: SvgrComponent;

  export { ReactComponent };
}

[masihjahangiri]

I use this type definition for it:

declare module '*.svg' {
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const content: string;

  export { ReactComponent };
  export default content;
}