SVG 图标不加载

Question

显示了我项目中的一些 svg 图标和一些图标t. Here有问题的例子

<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="windows">
<defs>
      <linearGradient id="windows_svg__b" x1="0%" x2="100%" y1="0%" y2="100%">
        <stop offset="0%" stop-color="#FFF" stop-opacity="0.1"></stop>
        <stop offset="100%" stop-color="#0087C7"></stop>
      </linearGradient>
      <path id="windows_svg__a"
        d="M6.5 14.62l-5.656-.892A1 1 0 010 12.74V8.288h6.5v6.333zm1 .159V8.288H16v6.662a1 1 0 01-1.156.988L7.5 14.778zm-1-13.367v5.876H0V3.241a1 1 0 01.853-.989l5.647-.84zm1-.148L14.853.17A1 1 0 0116 1.16v6.128H7.5V1.264z">
      </path>
    </defs>
    <g fill="none" fill-rule="evenodd">
      <use fill="#0087C7" xlink:href="#windows_svg__a"></use>
      <use fill="url(#windows_svg__b)" fill-opacity="0.8" xlink:href="#windows_svg__a"></use>
    </g>
  </svg>

https://codesandbox.io/s/practical-satoshi-o68rnt

我猜这是带有标签的问题，但不确定也不知道如何修复它

Answer 1

尝试使用

import { ReactComponent as Icon } from "path/icon.svg";

然后你可以在 React 中将其用作组件

<div>
    <Icon />
</div>

Answer 2

您的代码有 2 个问题第一个问题是您的 SVG 有一些问题请使用下面的代码。

`<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="windows">
<defs>
      <linearGradient id="windows_svg__b" x1="0%" x2="100%" y1="0%" y2="100%">
        <stop offset="0%" stop-color="#FFF" stop-opacity="0.1"></stop>
        <stop offset="100%" stop-color="#0087C7"></stop>
      </linearGradient>
      <path id="windows_svg__a"
        d="M6.5 14.62l-5.656-.892A1 1 0 010 12.74V8.288h6.5v6.333zm1 .159V8.288H16v6.662a1 1 0 01-1.156.988L7.5 14.778zm-1-13.367v5.876H0V3.241a1 1 0 01.853-.989l5.647-.84zm1-.148L14.853.17A1 1 0 0116 1.16v6.128H7.5V1.264z">
      </path>
    </defs>
    <g fill="none" fill-rule="evenodd">
      <use fill="#0087C7" href="#windows_svg__a"></use>
      <use fill="url(#windows_svg__b)" fill-opacity="0.8" href="#windows_svg__a"></use>
    </g>
  </svg>`

其次，您必须先导入该图像，然后才能在您的代码中使用它。

import "./styles.css";
import icon from"../public/icons/icon.svg";

export default function App() {
return (
<div className="App">
<img src={icon} alt="sorry" />
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}

SVG 图标不加载

SVG icon doesn`t load

reactjs

svg