如何将 SVG 实现到 React 项目中（来自 Vanilla JS）答案

【问题标题】：How do I implement SVG's into a React project (from Vanilla JS)如何将 SVG 实现到 React 项目中（来自 Vanilla JS）
【发布时间】：2021-06-22 15:17:59
【问题描述】：

我现在正在上一门高级 CSS 课程，该课程教授如何实现 SVG。但是，它使用 Vanilla JS，我想将其实现到 React 项目中。

使用 Vanilla JS，要将 SVG 实现为按钮，您必须这样编写：

<button class="search__button">
    <svg class="search__icon">
        <use
            xlink:href="img/sprite.svg#icon-magnifying-glass"
        ></use>
    </svg>
</button>

但是，此代码在 React 应用程序中不起作用。我已经知道xlink:href 在 React 中不起作用，必须改成xlinkHref。 “class”也必须重命名为“className”。但是，即使更改此设置，SVG 也不会被渲染。

为什么会这样？如何渲染 SVG？

【问题讨论】：

标签： javascript css reactjs svg

【解决方案1】：

我对 Svgs 不是很有经验，但最好的干净方法是将 svg 变成可重用的组件

    function SVG(props){
    
      return <svg> //put the raw svg code here </svg>
    }

export default SVG;

然后在你想使用的文件中导入它：

import SVG from 'put SVG component (function) path here' ;

导入后这样使用：

<button> 
<SVG/>
</button>

您也可以像这样像普通图像一样导入 svg：

import Svg from 'path to location of raw svg (not the component above)'

并像这样使用它

<img src={Svg}>

【讨论】：

嘿，感谢您的回答 :) 您的解决方案与我发布的解决方案非常相似。您的第一个解决方案听起来像我的第二个，但是，您会将其制成一个单独的组件，以便可以重复使用，对吗？您的第二个解决方案看起来像我的，但是您从文件位置“导入”它，我只是将它放入 img src 而不导入它。您的解决方案有什么好处吗？:)
嗨 @MikhailRatner，将 svg 转换为组件是最好的解决方案，因为您避免“干”意味着您不会重复自己，您只需声明一次代码，如果您想进行更改你会在一个地方实现它，它会在任何地方反映出来。关于问题的第二部分。在我看来，导入它对 webpack 很有帮助，因为有时只是将它放在 src 中可能会失败。此外，当您导入它时，您会将其作为变量使用，因此您可以在同一个文件中的许多地方使用它。
@MikhailRatner 另外，如果您想将 svg 更改为另一个，您可以更改文件的导入路径。您只需更改一次，更改将反映在该文件中的任何地方，因为您将其存储在变量中。如果您只是像以前一样粘贴 svg 并且想将其换成新的，则必须在所有地方手动更改代码。希望这有帮助:)
这非常有用，谢谢！另外，是的，我实际上在使用 webpack 时遇到了困难，不得不将 img src 调整为与平时略有不同的路径。起初，您的解决方案似乎有点复杂，对于像我这样的小项目来说没有必要，但我想最好从一开始就做好。
也许还有一件事。我的一个朋友为我的项目制作了一个 svg 徽标，我尝试将原始 svg 代码复制粘贴到一个反应组件中。然而，JSX 向我展示了 223 个问题 xD 这个 svg 看起来也有点不同，而且比我从互联网上下载的其他 svg 长得多。但是当我将它用作 img src 时，它的效果非常好。你知道它可能是什么吗？或者你以前有过这样的经历吗？

【解决方案2】：

我发现了两个非常直接的解决方案。我不确定这些是否是最佳解决方案，但它们确实有效。

请随时添加更多/更好的解决方案。如果有更好的，我会将其标记为最佳解决方案:)

解决方案 1

使用 SVG 文件作为 src

<button className="search__button">
    <img className="search__icon" src="/img/SVG/magnifying-glass.svg" />
</button>

这是迄今为止 IMO 最好的解决方案，但我首先遇到了问题。我的 React 项目使用了 bundle.js 和 webpack，这导致路径与我以前不同。因此，如果您使用此解决方案但您的 img 损坏，请尝试使用路径。我尝试了很多版本的路径，例如以../ 开头，最终，这条路径奏效了。

解决方案 2

可以简单地将 SVG 的代码复制粘贴到 JSX 代码中。它绝对不干净，但它可以工作。

<button className="search__button">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<title>magnifying-glass</title>
<path d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
</svg>
</button>

【讨论】：