📌  相关文章
📜  如何从反应中的 pucblic 文件夹中获取 svg - Html (1)

📅  最后修改于: 2023-12-03 15:23:47.962000             🧑  作者: Mango

如何从 React 中的 public 文件夹中获取 SVG - HTML

在 React 中，我们通常将一些静态资源存储在 public 文件夹中，例如图片、字体等。其中，public 文件夹下的资源可以通过相对路径直接访问。

对于 SVG 图片，我们可以通过创建一个 React 组件来渲染它，并在 public 文件夹中引用。

创建 SVG 组件

我们通过 react-svg 库来创建 SVG 组件。首先，我们需要先安装它：

npm install react-svg

接着，我们在 src 文件夹下创建一个名为 Logo.js 的文件并定义组件：

import React from 'react';
import { ReactSVG } from 'react-svg';

const Logo = ({ src }) => (
  <ReactSVG src={src} />
);

export default Logo;

然后，在我们想要使用 SVG 图片的地方引入并使用这个组件：

import Logo from './Logo';

function App() {
  return (
    <div className="App">
      <Logo src="/logo.svg" />
    </div>
  );
}

export default App;

这样，我们就成功创建了一个可以在 public 文件夹下查找并渲染 SVG 图片的组件。

在 public 文件夹中引用 SVG 图片

我们将 SVG 图片存储在 public 文件夹下的 assets 文件夹中。在 index.html 文件中引用这个图片：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>React App</title>
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <!-- 引用 SVG 图片 -->
    <svg id="Logo" xmlns="http://www.w3.org/2000/svg">
      <symbol id="shape">
        <path d="M8 0v2H6v3.6l-.4.4L4 6V2H2v4c0 1.2 1 2 2 2h2v6h4v-6h2c1 0 2-.8 2-2V0H8zm4 8c0 .6-.4 1-1 1H9v4.813L7.273 10.56c-.2-.173-.527-.206-.793-.083L6 10.607v-1.214L7.465 9.12 6 7.414v-.386l1.48-1.08c.267-.122.593-.09.793.083L10 8.012z"/>
      </symbol>
    </svg>

    <!-- 引入 React 应用程序 -->
    <script src="%PUBLIC_URL%/build/index.js"></script>
  </body>
</html>

在 Logo.js 组件中，我们可以使用这个图片的 id（这里是 shape）来渲染 SVG 图片：

import React from 'react';
import { ReactSVG } from 'react-svg';

const Logo = () => (
  <ReactSVG>
    <svg>
      <use xlinkHref="#shape" />
    </svg>
  </ReactSVG>
);

export default Logo;

这样，就能够从 React 应用程序中渲染在 public 文件夹下存储的 SVG 图片了。

结语

通过创建一个 SVG 组件，我们可以在 React 应用程序中轻松地渲染在 public 文件夹下存储的 SVG 图片。