How to use SVGs in React

This article will explore how to use SVG in React in three examples:

• A loading icon
• A hover text effect
• A pizza customizer

SVG is an incredible format. Not only is it a lightweight, infinitely scalable alternative to raster images, it can also be styled, animated with CSS when embedding inline in HTML. SVGs can be used everywhere:

• icons, animated icons
• favicons
• special text effects
• a lightweight blurred placeholder for lazy-loaded images
• data visualization
• 3d graphics

How to use SVG in React

There are a few ways to use an SVG in a React app:

• Use it as a regular image
• Import it as a component via bundler magic (SVGR)
• Include it directly as JSX

Let's quickly go over each of them.

Use SVGs as regular images

SVGs can be used as an image, so we'd treat them as any other image resource:

<img src="/path/to/image.svg" alt="SVG as an image">

Note: A few meta frameworks handle this out-of-the-box, such as Gatsby & Create React App.

In Webpack 5, this is (surprisingly) simple to setup. Parcel 2 handles this out of the box with a special import prefix. Rollup has an official plugin.

import mySvg from './path/to/image.svg'

Pros:

• Straightforward

Cons:

• SVG can't be customized

Use case: Simple replacement for raster images that don't need customization, e.g., logos.

Import SVGs as components via bundler magic

When importing an SVG as a component, we can inline SVGs directly in our markup & use them as a component.

import { ReactComponent as IconMenu } from './icons/menu.svg'

export const ButtonMenu = ({ onClick }) => {
  return (
    <button onClick={onClick}>
        <span>Open Menu</span>
        <IconMenu width="1rem" />
    </button>
  )
}

SVGR is the library that powers this ability. Setting it up could be a little hairy, thankfully many popular frameworks (Create React App, Gatsby) support this feature out of the box.

Pros:

• Easy to handle a large amount of SVG
• Powerful templating

Cons:

• May need additional configuration
• Writing React component template is not straightforward

Use case: A custom SVG icon library

Include SVGs directly in JSX

JSX supports all SVG tags. We can (almost) paste the SVG directly into our React components!

This is the most straightforward method to take full advantage of SVG without bundler support, which is why we will use this method for all of our examples later in this article.

The only gotcha is that instead of regular HTML attributes, we have to use JS property syntax, e.g stroke-width -> strokeWidth

// fun fact: `viewBox` has always been camel-cased.
export const LoadingIcon = () => {
  return (
    <svg
      viewBox="0 0 24 24"
      xmlns="<http://www.w3.org/2000/svg>"
    >
      <path strokeWidth="2" stroke="tomato" d="M10...">
    </svg>
  )
}

Pros:

• Straightforward

Cons:

• Depending on the SVG, component code may not readable
• Not scalable for a large number of SVGs

Use case: One-off graphic such as illustration, blog header

SVGs & React in practice

This article will not be completed if we don't at least show off a few SVG tricks. In the following examples, we will explore what makes SVGs awesome.

Prerequisite

All examples will use create-react-app (CRA) and CSS Module. A way to start a CRA project is using codesandbox. Otherwise, make sure Node is installed (any TLS versions will do) and run this:

npx create-react-app my-app && cd my-app

Example 1: A Loading Icon

Here's what we'll be making:

Let's try writing this SVG from scratch. All we need is one circle. This is the SVG in its entirety:

const LoadingIcon = () => {
  return (
    <svg
      viewBox="0 0 24 24"
      xmlns="<http://www.w3.org/2000/svg>"
    >
      <circle
        cx="12" cy="12" r="8"
        stroke-width="4" stroke="tomato"
        fill="none"
      />
    </svg>
  )
}

Now let's make it move! We can now attach class names to SVG elements and animate them with CSS transform & animation.

Animating paths is a classic SVG trick, and it's all about stroke-dasharray. This property creates dashed lines, like in the image below:

Nothing too exciting. However, things get more interesting when you realize that these dashes can be offset. What if, instead of many short dashes, we have a single dash whose length is the same as the circle's circumference? We can then move that dash around by changing the offset, giving the appearance that the path is being shortened or lengthened.

Let's give it a try:

.main {
  stroke-dasharray: 50;
  stroke-dashoffset: 0;
  animation: load 5s linear infinite;
  transform-origin: center;
}

@keyframes load {
  0% {
    stroke-dashoffset: 50;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -50;
  }
}

Setting stroke-dashoffset to a negative value pushes the path further down & create the looping effect.

Note: 50 is roughly the circumference of the circle and for our use case we don't ever need to change that value. In other cases, we might need to calculate the exact number:

const $circle = document.querySelector('.main')
const radius = $circle.r.baseVal.value
const circumference = Math.PI * 2 * radius

Finally, to make the animation more dynamic, let's also rotate the circle.

@keyframes load {
  0% {
    transform: rotate(0deg);
    stroke-dashoffset: 50;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    transform: rotate(360deg);
    stroke-dashoffset: -50;
  }
}

prefers-reduced-motion

Loading icons typically doesn't have the type of animations that could cause issues. However, for a larger graphic with lots of animation, it's a good practice to provide a more gentle animation. In our case, we can extract the animation duration into a CSS variable & define a larger value inside of the prefers-reduced-motion media tag.

/* simple-icon.module.css */

.svg {
  /* ... */
  --speed: 5s;
}

@media (prefers-reduced-motion: reduce) {
  .svg {
    --speed: 10s;
  }
}

.path {
  /* ... */
  animation: load var(--speed, 5s) linear infinite;
}

Customize with React

Now let's make the icon customizable. We want to allow users to change color & thickness.

import styles from "./simple-icon.module.css";

export const SimpleLoadingIcon = ({
  color = "currentColor",
  thickness = 2
}) => (
  <svg
    className={styles.svg}
    viewBox="0 0 24 24"
    xmlns="<http://www.w3.org/2000/svg>"
  >
    <circle
      className={styles.path}
      cx="12"
      cy="12"
      r="8"
      strokeLinecap="round"
      strokeWidth={thickness}
      stroke={color}
      fill="none"
    />
  </svg>
);

If color is unset, the stroke color will inherit from its parent.

Accessibility

Since our loading icon does not contain any text, we should give it a