How to Configure SVG Loaders in Webpack
Configure Webpack to handle SVG imports as React components, raw strings, or asset URLs depending on your needs.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Choosing an SVG Loader Strategy
Different projects need different SVG handling — @svgr/webpack converts SVGs to React components, while asset modules or url-loader handle SVGs as static file references for simpler use cases.
- @svgr/webpack: converts SVG imports into React components directly
- Asset modules (Webpack 5): handle SVG as a URL or inline base64
- Choose based on whether you need component-level styling control
Configuring Multiple Import Modes
Some projects configure both a component import (?component suffix) and a URL import (?url suffix) for the same SVG file, giving flexibility to use the same source file differently across the codebase.
- Use resourceQuery in webpack rules to support multiple import modes
- ?url suffix imports as a file path string for img src usage
- Default import (no suffix) can be configured as a React component
Frequently Asked Questions
Which SVG loader should I use for a React project?
@svgr/webpack is the standard choice for React projects, converting SVG files directly into reusable React components with prop support.
Can the same SVG file be imported as both a component and a URL?
Yes, with resourceQuery-based webpack rules you can support suffixes like ?component and ?url on the same file path for different import behaviors.
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