How to add an SVG with React?

To add an SVG with React, we can import it as a component and add it directly into our components.

For instance, we write

import React from "react";
import { ReactComponent as BrandIcon } from "./assets/brand-icon.svg";

export default function () {
  return (
    <div>
      <BrandIcon />
    </div>
  );
}

to import the BrandIcon SVG and put it into our component to render it.