如何在 React 中导入 SVG

在 React 中导入 SVG 很简单。您可以使用 import 语句将 SVG 文件导入到您的 React 组件中。接下来，您可以将该 SVG 文件渲染到您的组件中。

以下是如何在 React 中导入和渲染 SVG 的步骤：

步骤 1：将 SVG 文件导入到 React 组件中

使用以下语法将 SVG 文件作为 React 组件导入：

import { ReactComponent as MyIcon } from './my-icon.svg';

有关上述代码的说明：

• 该代码使用了 ES6 import 语法。
• ReactComponent 是在导入过程中为 SVG 文件指定的名称，您可以根据需要更改此名称。
• ./my-icon.svg 是 SVG 文件的路径，您应该将其替换为您的 SVG 文件的实际路径。

步骤 2：将 SVG 图标渲染到 React 组件中

要将 SVG 图标渲染到 React 组件中，请使用以下代码：

function App() {
  return (
    <div>
      <MyIcon />
    </div>
  );
}

<MyIcon /> 是您导入的 SVG 文件的组件名称。

示例

以下示例演示了如何在 React 中导入和渲染 SVG 图标。假设您的 SVG 文件名为 react-icon.svg，保存在 src 文件夹中。

// src/App.js
import React from 'react';
import { ReactComponent as ReactIcon } from './react-icon.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <ReactIcon />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

/* src/App.css */
.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

将上述代码保存到您的项目中，并在浏览器中查看您的应用程序。您应该能够看到以下内容：

注意事项

• 您可以使用任何 SVG 编辑器创建 SVG 文件，例如 Adobe Illustrator 或 Inkscape。
• 不要忘记在 SVG 文件中包含 xmlns="http://www.w3.org/2000/svg" 属性。这对于确保 SVG 正确渲染非常重要。例如：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <!-- SVG 图标内容 -->
</svg>

• React 不支持在 SVG 元素中添加 CSS 样式，但您可以使用 style 属性。例如：

<svg style={{ fill: "#ffffff" }} />

结论

在 React 中导入和渲染 SVG 非常简单。您只需使用 ES6 import 语法将 SVG 文件导入到您的 React 组件中，并将其渲染到您的应用程序中。