react-native-web typescript error when passing props to svg component

Question

I've configured metro and webpack to import svgs like so:

import PlayIcon from '../../assets/icons/play-icon.svg';

...

return () => <PlayIcon />

The problem is when I try to pass props, I get a typescript error on both my editor (vscode) and webpack terminal:

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

this is my tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": [
      "es6"
    ],
    "allowJs": true,
    "jsx": "react",
    "noEmit": true,
    "isolatedModules": true,
    "strict": false,
    "moduleResolution": "node",
    "baseUrl": "./",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ],
  "include": [
    "src",
    "src/types/definitions/svg.d.ts"
  ]
}

and src/types/definitions/svg.d.ts:

declare module '*.svg' {
    import { SvgProps } from 'react-native-svg';
    const content: React.FC<SvgProps>;
    export default content;
}

// also tried, amongst others
declare module '*.svg' {
    const content: any;
    export default content;
}

Things I've tried:

Passing "**/*.svg" to tsconfig.json.exclude
Different ways to declare the svg module definitions. The one I posted here is what I've found in many tutorials and references.

So what am I doing wrong?

goldylucks · Accepted Answer · 2020-12-28 16:23:02Z

1

What worked from me was adding a file src/declarations.d.ts:

declare module '*.svg' {
    import React from 'react';
    import { SvgProps } from 'react-native-svg';
    const content: React.FC<SvgProps>;
    export default content;
}

answered Dec 28, 2020 at 16:23

goldylucks

6,1626 gold badges44 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react-native-web typescript error when passing props to svg component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related