Importing SVG and setting props gives IntrinsicAttributes error in typescript

[amritk]

Describe the bug

When importing an SVG into a component and trying to set props like fill or width, it gives the following error

Type '{ fill: string; width: number; height: number; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'fill' does not exist on type 'IntrinsicAttributes'.

Did you try recovering your dependencies?

yarn --version
1.22.0

Which terms did you search for in User Guide?

IntrinsicAttributes, typescript, svg

Environment

Environment Info:

  current version of create-react-app: 4.0.3
  running from /home/amritk/.nvm/versions/node/v14.16.0/lib/node_modules/create-react-app

  System:
    OS: Linux 5.12 Arch Linux
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.0/bin/yarn
    npm: 7.6.3 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Firefox: 88.0.1
  npmPackages:
    react: 17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-scripts: ^4.0.3 => 4.0.3 
  npmGlobalPackages:
    create-react-app: 4.0.3

Steps to reproduce

(Write your steps here:)

1. Import svg like so import Login from '../../assets/login_1.svg';
2. Try to use svg in component

      <Login
        fill={`${AppConfig.Colors.TERTIARY}88`}
        width={AppConfig.Styles.getAdjustedSize(100)}
        height={AppConfig.Styles.getAdjustedSize(40)}
      />

Expected behavior

It should work

Actual behavior

I get the following error:

Type '{ fill: string; width: number; height: number; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'fill' does not exist on type 'IntrinsicAttributes'.

Reproducible demo

Did not create but can if its neccessary

Fix

If you go into react-scripts/lib/react-app.d.ts and replace

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

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

with

declare module '*.svg' {
  import {ReactElement, SVGProps} from 'react';

  const content: (props: SVGProps<SVGElement>) => ReactElement;
  export default content;
}

It works, I would make a PR but I'm new to react and not sure if that would break anything else.

[ThakerJayam]

any solution found so far? Or any work around?

[amritk]

@jwalkerinterpres I think everyone has moved away from cra now. Try vite or next. I'll close this issue