How to import Svg into React (Manually and with SvgR)?

About

This page shows you how you can show Svg in React.

The problem is that Raw Svg are not natively React component and therefore cannot be added to the React tree directly.

Solution

Import as URL

The Javascript world is weird and you should notice that import definition is dependent on your build server

For instance, in vite the default import will just return the resolved public URL.

You can therefore use it directly in a image.

import myLogo from '/logo.svg'
....
<img src={myLogo} className="logo" alt="logo" />

Create React component from svg

This article shows you how you can create a React Component from a Svg:

manually
at compile time (with the help of SvgR)
at runtime

How to transform an SVG manually into a React Component?

Below is the SVG that we want to integrate into React.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="36px">
   <rect
        x="128"
        y="128"
        width="336"
        height="336"
        rx="57"
        ry="57"
        fill="none"
        stroke="currentColor"
        stroke-linejoin="round"
        stroke-width="32"
      />
  <path
	d="M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24"
	fill="none"
	stroke="currentColor"
	stroke-linecap="round"
	stroke-linejoin="round"
	stroke-width="32"
  />
</svg>

Rendered by WebCode

To transform a HTML element into a Jsx element:

the class attribute is called className
and the other attributes have a camelCase format (ie they do not have any minus - and the letter that follows a minus is in uppercase)

For instance, the HTML attribute stroke-linejoin would become the JSX attribute strokeLinejoin.

For the icon above, the icon would then become:

let iconComponent = (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="36px">
   <rect
        x="128"
        y="128"
        width="336"
        height="336"
        rx="57"
        ry="57"
        fill="none"
        stroke="currentColor"
        strokeLinejoin="round"
        strokeWidth="32"
      />
  <path
	d="M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24"
	fill="none"
	stroke="currentColor"
	strokeLinecap="round"
	strokeLinejoin="round"
	strokeWidth="32"
  />
</svg>
)

The output is then:

Rendered by WebCode

How to transform an SVG automatically at compile time?

If you got tired to transform your SVG, you can also do it at compile time thanks to the SVGR.

The idea is that because there is a lot of chance that you use a bundler to compile JSX or Typescript into Javascript, the bundler can also transform SVG into React component.

SVGR is a bundler plugin that does exactly that.

For installation into your bundler, check the installation page

The advantage of this choice is that you can install icon package such as Bootstrap icon and use them directly.

Example:

import FolderIcon from "bootstrap-icons/icons/folder.svg";

const MyComponentWithAFolderIcon = () => (
  <div>
    <FolderIcon /> Bootstrap Folder Icon !
  </div>
)

How to transform an SVG automatically at runtime?

You can also automate it at runtime.

For instance, the material ui library has a Svg Icon that permits to pass directly the SVG.

import StarIcon from './star.svg';

<SvgIcon component={StarIcon} viewBox="0 0 600 476.6" />