Question

I have typescript error while adding props to Svg as ReactComponent- type is not assignable to type IntrinsicAttributes . Plugin: vite-plugin-svgr

vite.config.ts -

svgr({
      exportAsDefault: true,
      svgrOptions: {
        icon: true,
      },
    })

增编

"types" : "vite-plugin-svgr/client"

to and

import Icon from "./path"

Any suggestions?

Answer 1

对我来说,我没有创造任何习俗档案,你只是需要。

In tsconfig.json

"compilerOptions": 
{
    [...rest...]
    "types": ["vite-plugin-svgr/client"] <--- this line
},

In vite.config.ts

import svgr from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
});

In your tsx file in order to use it

import { ReactComponent as MySuperCustomIconComponent } from "../assets/logo.svg";

and simply use it

<MySuperCustomIconComponent/>

Answer 2

有一个声明助手,即你只需要附上<条码>-env.d.ts。我有与其他解决办法相容的问题。

// vite-env.d.ts
// ...
/// <reference types="vite-plugin-svgr/client" />

Answer 3

Expanding on https://stackoverflow.com/a/75036507/8645558 For anyone thats trying to import svg as react component import { ReactComponent as Settings } from @/assets/navicons/Settings.svg ;

您需要增加出口,然后再增加出口。

declare module  *.svg  {
  import * as React from  react 

  export const ReactComponent: React.FunctionComponent<
    React.ComponentProps< svg > & { title?: string }
  >
  export default ReactComponent
}

Answer 4

为在违约时将特殊产品进口作为反应部分,请将<代码>*.svg进口到vite-plugin-svgr的进口列入<代码>vite.config.ts。档案:

svgr({
  include:  **/*.svg 
})

接着,为了确定打字错误,你必须宣布<代码>*>。模块类型定义 www.un.org/Depts/DGACM/index_french.htm 档案:

declare module *.svg { import * as React from react ; const ReactComponent: React.FunctionComponent< React.ComponentProps< svg > & { title?: string } >; export default ReactComponent; } /// <reference types="vite/client" />

Answer 5

That s because you are exporting svg file as default and the typescript inside vite-plugin-svgr/client file doesn t have default declaration.

Let s try this:

Create a declaration (.d.ts file)
Add this declaration:

declare module  *.svg  {
  import * as React from  react 

  const ReactComponent: React.FunctionComponent<
    React.ComponentProps< svg > & { title?: string }
  >
  export default ReactComponent
}

Answer 6

解决办法一最后是:

Create an svg.d.ts file with this content:

declare module  *.svg  {
 const content: React.FC<React.SVGProps<SVGElement>>;
 export default content;
}

Add /// <reference types="./{path}/{relative}/{to}/{vite-env.d.ts}/svg" /> to the vite-env.d.ts before any other triple-slash directives. Example:
```
/// <reference types="./@types/svg" />
/// <reference types="vite/client" />
```

P. S.

基本上,这是另一种提供的解决办法:link。

declare module  *.svg  {
  const content: React.FC<React.SVGProps<SVGElement>>
  export default content
}

/// <reference types="vite/client" />

这为我提供了建议的解决办法,因为尽管svg got打上了字,但vite/client打字却不复存在。

Answer 7

I had the same error when I changed bundler to Vite. Yarn install was also giving an error and saying Vite needs node 18. So I changed my node version from 16 to 18 with nvm then yarn install and then yarn dev. The problem solved

Answer 8

如果你想要进口假文件,作为反应委员会的责任,那么吗? 反应充其量,然后压倒以下文字:

export default defineConfig({
  // ...
  plugins: [
    // ...
    svgr({
      svgrOptions: { exportType:  named , ref: true, svgo: false, titleProp: true },
      include:  **/*.svg ,
    }),
    // ...
  ],
  // ...
});

declare module  *.svg  {
  import * as React from  react 

  export const ReactComponent: React.FunctionComponent<
    React.ComponentProps< svg > & { title?: string }
  >
  export default ReactComponent
}

友情链接