Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

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

$
0
0

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 othersdeclare module '*.svg' {    const content: any;    export default content;}

Things I've tried:

  1. Passing "**/*.svg" to tsconfig.json.exclude
  2. 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?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>