实际上非常简单。你可以配置webpack（或者你正在使用的bundler）直接导入svg作为react组件。你可以使用img标签并添加路由到svg，它应该直接将其呈现为图像。你也可以依赖library。总而言之，即使它们是用xml编写的，你也可以将svg视为图像

在react中使用SVG图像最简单的方法是导入它们并在<img /> src中使用它们。

import myLogo from '/path/to/image.svg'
 
const Button = () => {
  return (
    <button>
      <img src={myLogo} alt="SVG logo image"/>
    </button>
  );
}

将它们设置为背景图像等CSS：

.container {
  background-image: url(/path/to/image.svg);
}

正在转换为JSX：

* 常规 * SVG标记：

<svg 
  xmlns="http://www.w3.org/2000/svg"
  class="h-6 w-6"
  fill="none"
  viewBox="0 0 24 24"
  stroke="currentColor"
  stroke-width="2"
>
  <path 
  stroke-linecap="round"
  stroke-linejoin="round"
  d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
  />
</svg>

React：

<svg 
  xmlns="http://www.w3.org/2000/svg"
  className="h-6 w-6"
  fill="none"
  viewBox="0 0 24 24"
  stroke="currentColor"
  strokeWidth={2}
>
  <path 
  strokeLinecap="round"
  strokeLinejoin="round"
  d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
/>
</svg>

SVG作为React组件

/path/to/LeftArrow.jsx

export const LeftArrow = () =>{
  return(
    <svg 
    xmlns="http://www.w3.org/2000/svg"
    className="h-6 w-6"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
    strokeWidth={2}
  >
    <path 
    strokeLinecap="round"
    strokeLinejoin="round"
    d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
  />
  </svg>
  )
};

import { LeftArrow } from './path/to/LeftArrow.jsx'
 
export const Button = () =>{
  return(
    <button>
      <LeftArrow />
    </button>
  )
};

使用SVGR作为数据URL

这就是我所做的，因为它允许我使用SVG作为内联元素。

npm install svg-url-loader --save-dev

webpack.config.js

const webpack = require('webpack');
 
module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              limit: 10240,
              // make all svg images to work in IE
              iesafe: true,
            },
          },
        ],
      },
    ],
  },
};

import myLogo from '/path/to/image.svg'
 
const Button = () => {
  return (
    <button>
      <img src={myLogo} alt="SVG logo image"/>
    </button>
  );
};

这会将其编译为如下URL：

<img src="wes49idjdur935jujd8907jdh.svg" alt="SVG logo image" />

在使用React的大多数时候，你可能希望有条件地渲染SVG。一个常见的例子是"汉堡包"菜单（点击时会改变）。我继续介绍了一个这样的例子：
Hamburger.jsx

import React from 'react';

export const Hamburger = () =>{
  const [ isOpen, setisOpen ] = React.useState(false)
  return(
    <React.Fragment>
    { isOpen ? (
      <button 
        onClick={()=>setisOpen(false)}
       >
        <svg 
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
           strokeWidth={2}
        >
          <path 
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M6 18L18 6M6 6l12 12"
           />
        </svg>
      </button>
    ):( <button 
          onClick={()=>setisOpen(true)}
         >
          <svg 
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2}
          >
            <path 
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M4 6h16M4 12h16M4 18h16"
            />
          </svg>
         </button>
        )
      }
    </React.Fragment>
  )
};

• 使SVG正确显示的附加CSS：*

svg {
  height: 40px;
  width: 40px;
}