SVG icon doesn`t load-CodePudding

Some svg icons in my project are displayed and some dont. Heres an example of one that has issue

<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

I guess that`s something with tags but not sure and have no idea how to fix it

CodePudding user response：

Try to use

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

And then you can use it as component in React

<div>
    <Icon />
</div>

CodePudding user response：

There are 2 issues with your code first issue is with your SVG have some issues please use the below one.

`<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>`

Second, you have to import that image first, and then you can use it in your code.

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>
);
}