Usage with TypeScript about svgr HOT 12 CLOSED

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;
}

from svgr.

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 />

from svgr.

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)

from svgr.

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

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 };
}

from svgr.

@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?

from svgr.

@marquesdev nice! I have just released v2!

from svgr.

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!

from svgr.

A TypeScript example would be nice:

from svgr.

Hello everyone :)

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

from svgr.

@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.

from svgr.

@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.

from svgr.

See #89.

from svgr.