反应 SVG 没有显示答案

【问题标题】：React SVG not showing反应 SVG 没有显示
【发布时间】：2020-05-31 21:50:50
【问题描述】：

我在我的 react 应用中显示 SVG 时遇到问题。

代码如下：

<svg className="svg-arrow">
    <use xlinkHref="#svg-arrow" />
</svg>

 //styling
.user-quickview .svg-arrow {
    fill: #fff;
    position: absolute;
    top: 12px;
    right: 10px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.svg-arrow {
    width: 4px;
    height: 8px;
    cursor: pointer;
}

在另一个项目中，如果没有反应，SVG (xlink:href) 可以完美运行。

有人对此有解决方案吗？

【问题讨论】：

标签： javascript reactjs svg

【解决方案1】：

SVG 图像在 React 中显示，无需特殊链接或插件。 SVG 可能无法显示还有另一个原因。如果您绘制 SVG 的画布非常大，而您创建的图像非常小并且位于画布的中间，则图像可能无法显示，因为图像周围有太多空白区域。您需要裁剪画布（视口），使图像靠近画布（视口）边缘。换句话说，摆脱空白。使用文本编辑器检查 SVG/XML 以查看视口矩形的设置。您可以使用 Illustrator 或在线 SVG 编辑器工具直观地裁剪 SVG 图像。

【讨论】：

【解决方案2】：

如果不查看您的组件和代码，就很难满足您的特定需求。但是你试过react-svg吗？
你也可以阅读this

【讨论】：

感谢您的链接。我会结束这个问题。我犯了自己的错误。

【解决方案3】：

您可以使用npm "install @svgr/cli --save-dev"。

这可以帮助您基于 SVG 图标生成 React 组件，然后您可以将 fill、height、width 作为道具传递。使用非常简单。

查看此link 以获得更详细的说明。

【讨论】：

【解决方案4】：

我做了什么，

import React from 'react'
import svg from "../assets/img/sprite.svg";

const Header = () => {
  return (
    <div>
      <button class='search__button'>
       <svg class='search__icon'>
         <use xlinkHref={`${svg}#icon-magnifying-glass`} />
       </svg>
      </button>
    </div>
  )
}

export default Header

这是如何在纯 HTML 中完成的

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

【讨论】：