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:
- 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?