Iconify React搭配Eva图标使用时出现TS2741类型错误缺少fr属性

类型“{ icon: IconifyIcon; }”缺少属性“fr”，但该属性在类型“Pick<IconProps, "string" | "children" | "className" | "style" | "display" | "overflow" | "visibility" | "order" | "color" | "width" | "height" | "fontFamily" | "fontSize" | ... 465 more ... | "vAlign">”中是必需的。Typescript错误码：TS2741

该报错由@iconify/react@3.1.0的类型定义与React 18+的类型定义不兼容导致：React 18的CSS属性类型新增了fr等CSS Grid相关属性的校验，而旧版@iconify/react未将这些属性标记为可选，触发了TS类型校验错误。

按推荐优先级排序如下：

• 方案1：升级@iconify/react到最新稳定版
  官方已在后续版本修复该类型兼容问题，直接升级依赖即可解决，执行对应包管理器的安装命令：

  # npm
  npm install @iconify/react@latest
  # yarn
  yarn add @iconify/react@latest
  # pnpm
  pnpm add @iconify/react@latest
  

• 方案2：锁定@types/react版本（仅适用React 17项目）
  如果项目实际使用React 17版本，可将@types/react依赖版本锁定到17.x区间，避免引入React 18新增的类型校验规则。
• 方案3：临时绕开类型校验
  若暂时无法升级依赖，可选择以下任意一种方式临时规避校验：
  1. 给Icon组件增加类型断言：

  import { Icon } from '@iconify/react';
  import plusFill from '@iconify/icons-eva/plus-fill';
  
  const App = () => {
    return (
      <Icon icon={plusFill} {...{} as any} />
    )
  }
  

  2. 在tsconfig.json的compilerOptions配置项中开启跳过库类型校验：

  {
    "compilerOptions": {
      "skipLibCheck": true
    }
  }
  

内容的提问来源于stack exchange，提问作者Abhijit Desai