How to Import an SVG Using the SVG to React Method in React Applications

The best way to import an SVG as a React component is to use SVGR, which transforms .svg files into JSX components at build time, allowing you to treat them as standard React components with full support for props, event handlers, and styling.

While React itself—maintained in the facebook/react repository—does not include a built-in SVG transformer, the svg to react method leverages SVGR to compile static SVG markup into React.createElement calls. This approach aligns with React's component architecture and integrates seamlessly with the JSX processing pipeline defined in the React source code.

What Is the SVG to React Method?

The svg to react method refers to the build-time transformation of SVG files into React components using SVGR. Unlike runtime solutions that parse SVG strings in the browser, SVGR operates during compilation, converting SVG XML into typed JSX components. This produces zero runtime overhead because the browser receives plain SVG markup embedded in React's element structure.

According to the React source structure, components instantiated via packages/react/src/React.js expect JSX elements or component functions. SVGR generates code that satisfies these expectations by outputting standard React component definitions that return SVG elements, which packages/react-dom/src/client/ReactDOMClient.js then renders to the DOM using React's reconciliation algorithm.

Method 1: Importing SVGs in Create React App or Vite

If you use Create React App (CRA) 2.0+ or Vite, SVGR is pre-configured in the default build pipeline. These tools automatically process SVG imports that use the special ReactComponent named import syntax.

Place your SVG file in the src directory:

src/
  icons/
    search.svg

Import the SVG as a component:

import { ReactComponent as SearchIcon } from './icons/search.svg';

function Header() {
  return (
    <header>
      <SearchIcon width={24} height={24} fill="currentColor" />
      <h1>My App</h1>
    </header>
  );
}

The bundler (Webpack in CRA, Rollup in Vite) invokes SVGR automatically when it detects this import pattern, transforming the SVG into a component that accepts standard React props like className, onClick, and style.

Method 2: Configuring SVGR in Custom Webpack Builds

For custom build pipelines—such as Next.js, custom Webpack configurations, or monorepos—you must manually configure the SVGR loader. This setup mirrors the behavior found in the build scripts located in scripts/babel/*.js within the React repository, where Babel and Webpack orchestrate JSX transformation.

Install the Webpack loader:

npm install --save-dev @svgr/webpack

Configure webpack.config.js to process .svg files:

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
};

With this configuration, import SVGs directly without special syntax:

import SearchIcon from './icons/search.svg';

export default function Home() {
  return <SearchIcon width={32} height={32} fill="#0070f3" />;
}

Advanced Configuration and Babel Integration

SVGR supports extensive customization through query parameters or Babel configuration. You can modify the generated component's behavior—such as setting default dimensions to 1em for icon usage or restricting prop spreading.

Webpack query syntax:

import { ReactComponent as Logo } from './logo.svg?svgr?icon=true';

Babel plugin approach:

For environments where you cannot modify Webpack (similar to constraints handled by scripts/babel/*.js), use @svgr/babel-plugin:

npm install --save-dev @svgr/babel-plugin

Add to .babelrc:

{
  "plugins": ["@svgr/babel-plugin"]
}

This approach is particularly useful in Next.js or when integrating with the custom Babel configurations found in the React repository's build toolchain.

How SVGR Integrates with React Internals

Understanding the svg to react method requires insight into how React processes component definitions. The output generated by SVGR consists of JavaScript functions that return JSX, which the build system (using patterns similar to those in scripts/babel/*.js) transforms into React.createElement calls.

When you import an SVGR-generated component, packages/react/src/React.js handles the component instantiation, while packages/react-dom/src/client/ReactDOMClient.js manages the rendering of the resulting SVG elements to the DOM. Because SVGR produces static JSX at build time—rather than runtime SVG parsing—React's reconciliation process treats these components as efficiently as hand-written components, supporting features like tree-shaking and prop drilling without additional runtime libraries.

Summary

• SVGR is the standard tool for importing SVGs as React components, converting .svg files to JSX at build time.
• Create React App and Vite include SVGR by default; use the import { ReactComponent as Icon } from './icon.svg' syntax.
• Custom Webpack builds require @svgr/webpack in the module rules configuration.
• Zero runtime overhead occurs because SVGR outputs static JSX that React processes like any other component, as defined in packages/react/src/React.js.
• Full React interactivity is supported, including props for styling, event handlers, and state management.

Frequently Asked Questions

Does React include a built-in SVG to React converter?

No, React does not ship with a built-in SVG transformer. The core library in packages/react/src/React.js handles component execution but does not parse or convert SVG file formats. You must use a build-time tool like SVGR to transform SVGs into React components before they reach the React runtime.

Can I use the svg to react method with Next.js?

Yes, Next.js supports SVGR through custom Webpack configuration in next.config.js or via the Babel plugin. Since Next.js uses a custom build pipeline distinct from CRA, you must explicitly configure @svgr/webpack to handle .svg imports, similar to the custom Webpack setup described above.

How do I pass custom props to an imported SVG component?

When using SVGR, the generated component accepts all standard React props. You can pass className, style, onClick, width, height, fill, and other valid SVG attributes directly to the imported component. In custom Webpack setups, SVGR spreads props onto the root <svg> element by default, enabling full styling control.

Is there a performance cost to using SVGR compared to inline SVGs?

No, SVGR produces zero runtime overhead because the transformation happens at build time. The output is static JSX that React processes through its standard reconciliation cycle, as implemented in packages/react-dom/src/client/ReactDOMClient.js. This approach is often more performant than runtime SVG injection methods that require DOM parsing in the browser.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}