SVG Webpack Loader Configuration
Webpack offers several ways to handle SVG imports — here's how to choose and configure the right one for your project.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Loader Options Compared
Webpack 5's built-in Asset Modules (`type: 'asset/resource'` or `'asset/inline'`) replace the older `file-loader`/`url-loader` for basic import-as-URL needs. For importing SVGs as React (or Vue/Svelte) components, `@svgr/webpack` remains the standard, transforming SVG files into usable component functions at build time.
- Webpack 5 Asset Modules handle basic import-as-URL cases natively
- @svgr/webpack converts SVGs into framework components
- Choose based on whether you need a URL reference or a component
Configuration Example
A typical setup uses `@svgr/webpack` for `.svg` imports used as components (`import Logo from './logo.svg'` → `<Logo />`), while a separate rule with Asset Modules handles SVGs referenced as plain URLs (background images, `<img src>`) — distinguishing the two use cases with resourceQuery (e.g. `?url` suffix) is a common pattern.
- Separate rules for component-import vs. URL-reference use cases
- resourceQuery (?url suffix) disambiguates the two import styles
- Test both import styles work correctly after any Webpack version upgrade
Frequently Asked Questions
Do I need file-loader or url-loader in a modern Webpack setup?
No — Webpack 5's built-in Asset Modules replace both for standard use cases. Only use the older loaders if you're on Webpack 4 or need very specific legacy loader behavior.
Can I import the same SVG both as a component and as a URL?
Yes — use a resourceQuery suffix like import logoUrl from './logo.svg?url' alongside import Logo from './logo.svg' with rules configured to handle each query pattern differently.
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