TypeScript Types for SVG
Proper TypeScript declarations for SVG imports and component props catch type errors early and improve editor autocomplete.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Declaring Types for Raw SVG File Imports
When a bundler allows importing an SVG file directly (as a URL string, a React component via SVGR, or raw markup), a corresponding .d.ts declaration file needs to tell TypeScript what type that import actually resolves to, since TypeScript has no built-in knowledge of how a specific bundler configuration handles SVG imports.
- A .d.ts declaration file tells TypeScript what an SVG import resolves to
- Necessary because TypeScript has no built-in knowledge of bundler-specific SVG handling
- Different import styles (URL string, component, raw markup) need matching declarations
Typing SVG Component Props Correctly
For a custom SVG icon component in React, extending React.SVGProps<SVGSVGElement> for the component's prop type gives correct typing and autocomplete for standard SVG attributes like fill, stroke, and className, while still allowing custom props like a size shorthand to be added alongside those standard SVG attributes.
- Extending React.SVGProps<SVGSVGElement> types standard SVG attributes correctly
- Provides accurate autocomplete for fill, stroke, className, and similar props
- Custom props like a size shorthand can be added alongside standard SVG props
Frequently Asked Questions
Why does my SVG import show a TypeScript error even though it works at runtime?
This typically means a matching .d.ts declaration file for that SVG import pattern is missing from the project — the code runs fine because the bundler handles it, but TypeScript itself doesn't know the resulting type without that declaration.
Does SVGR generate TypeScript types automatically for its React components?
Yes, SVGR's TypeScript output mode generates properly typed React components automatically, including correct prop types, when configured to output .tsx files instead of plain .jsx.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG