Where are the types for @svgr/core?

🐛 Bug Report

Can’t find the types for @svgr/core.

To Reproduce

Use @svgr/core in a TypeScript file.

Expected behavior

The types should be included with the package.

Link to repl or repo (highly encouraged)

This code:

import svgr from '@svgr/core';

Leads to this error:

<source file>:3:18 - error TS7016: Could not find a declaration file for module '@svgr/core'. '.../node_modules/@svgr/core/lib/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/svgr__core` if it exists or add a new declaration (.d.ts) file containing `declare module '@svgr/core';`

3 import svgr from '@svgr/core';
                   ~~~~~~~~~~~~

System:

• OS: Windows 10 10.0.19042
• CPU: (4) x64 Intel® Core™ i7-6600U CPU @ 2.60GHz
• Memory: 6.82 GB / 15.86 GB

Binaries:

• Node: 14.15.0 - C:\Program Files\Node.js\node.EXE
• Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
• npm: 6.14.8 - C:\Program Files\Node.js\npm.CMD

[jschaf]

I took a stab at this. If someone cares to make it a real package, feel free.

• I couldn’t figure out what the TemplateFunc type is supposed to be.
• I’m also unclear on the exported svgr function, especially the last state argument.

declare module '@svgr/core' {

  export interface TemplateOptions extends SvgrOpts {
  }

  export interface TemplateData {
    imports: string[];
    interfaces: string[];
    componentName: string;
    props: string[];
    jsx: string;
    exports: string[];
  }

  export type TemplateFunc = ({template: unknown}, opts: TemplateOptions, data: TemplateData) => string;

  export interface SvgrOpts {
    /** Specify a custom config file. */
    configFile?: string;
    /** Replace SVG width and height with 1em to make SVG inherit text size. */
    icon?: boolean;
    /** Custom extension for generated files (default "js"). */
    ext?: string;
    /** Modify all SVG nodes with uppercase and use react-native-svg template. */
    native?: boolean | {expo: boolean};
    /** Generate .tsx files with TypeScript bindings. */
    typescript?: boolean;
    /** Keep width and height attributes from the root SVG tag. */
    dimensions?: boolean;
    /** Forward all properties on the React component to the SVG tag. */
    expandProps?: 'start' | 'end' | false;
    /** Use Prettier to format JavaScript code output. */
    prettier?: boolean;
    /** Specify prettier config. */
    prettierConfig?: Record<string, unknown>;
    /** Use SVGO to optimize SVG code before transforming into a React component. Default: true. */
    svgo?: boolean;
    /** Specify SVGO config. https://gist.github.com/pladaria/69321af86ce165c2c1fc1c718b098dd0 */
    svgoConfig?: Record<string, unknown>;
    /** Forward the ref to the root SVG tag if true. */
    ref?: boolean;
    /** Wrap the exported component in React.memo if true. */
    memo?: boolean;
    /**
     * Replace an attribute value by another. Intended for changing an Icon
     * color to currentColor to inherit from text color.
     *
     * Specify dynamic property using curly braces: { '#000': "{props.color}" }
     */
    replaceAttrValues?: Record<string, string>;
    /**
     * Add props to the SVG tag.
     *
     * Specify dynamic property using curly braces: { focusable: "{true}" }.
     * Particularly useful with a custom template.
     */
    svgProps?: Record<string, string>
    /**
     * Add title tag via title property. If titleProp is set to true and no
     * title is provided (title={undefined}) at render time, this will fallback
     * to an existing title element in the svg if it exists.
     */
    titleProp?: boolean;
    /**
     * Specify a template file (CLI) or a template function (API) to use.
     * For an example of template, see the default one.
     * https://github.com/gregberge/svgr/blob/main/packages/babel-plugin-transform-svg-component/src/index.js
     */
    template?: TemplateFunc;
    /** Output files into a directory. */
    outDir?: string;
    /**
     * Specify a template function (API) to change default index.js output
     * (when --out-dir is used).
     *
     * https://github.com/gregberge/svgr/blob/main/packages/cli/src/dirCommand.js#L39
     */
    indexTemplate?: (filePaths: string[]) => string;
    /** When used with --out-dir, it ignores already existing files. */
    ignoreExisting?: boolean;
    /**
     * Specify a custom filename case. Possible values: pascal for PascalCase,
     * kebab for kebab-case or camel for camelCase.
     */
    filenameCase?: 'kebab' | 'camel' | 'pascal';
    }
  export const svgr: (svgCode: string, opts: SvgrOpts, state: TemplateData) => Promise<void>;
  declare module svgr {
    const sync: (svgCode: string, opts: SvgrOpts, state: TemplateData) => void;
  }
  export default svgr;
}

[kaiyoma]

Still an issue AFAIK.