How to svg as jsx vs. raw svg import in react: a practical comparison
- Step 1Identify your requirements — Do you need to theme the icon with CSS? Animate it? Change stroke/fill dynamically? If yes to any, inline SVG (as JSX) is required. Static decorative icons can use <img src='icon.svg'>.
- Step 2Consider bundle vs. cache trade-offs — JSX SVGs are bundled into JS — increasing JS parse time but avoiding extra HTTP requests. External .svg files are cached by the browser independently and don't block rendering.
- Step 3Choose based on icon frequency — Icons used on every page: JSX (cached in JS bundle). Page-specific large illustrations: external file (independent caching). Email/PDF-embedded logos: base64 inline.
Frequently asked questions
What is the @svgr/webpack package?+
@svgr/webpack transforms SVG files into React components at build time, allowing import { ReactComponent as Icon } from './icon.svg'. It automates JSX conversion without a manual step.
Does using SVG as <img> allow CSS styling?+
No. SVGs used as <img src> are treated as external documents — CSS from the parent page cannot reach inside them. Use inline SVG (JSX) for any CSS-based theming.
Which approach is better for Core Web Vitals?+
External SVG files with long cache headers are best for LCP icons (they're independently cacheable). JSX SVGs add to JS bundle size — use code splitting to mitigate.
Can I use SVG as a CSS background-image and still theme it?+
CSS data URI SVGs cannot inherit CSS custom properties from the parent page. Use fill=[currentColor-equivalent] in the SVG source and encode the color directly in the data URI for each theme variant.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.