使用 JSX 在 React 中使用 xlinkHref 不显示 SPRITE SVG 或 SIMPLE SVG答案

【问题标题】：SPRITE SVG or SIMPLE SVG not displaying using xlinkHref in React using JSX使用 JSX 在 React 中使用 xlinkHref 不显示 SPRITE SVG 或 SIMPLE SVG
【发布时间】：2020-04-15 21:21:39
【问题描述】：

我无法显示 SVG 徽标。我使用icomoon 生成了 svg。我想在我的 jsx 代码中加入xlinkHref="path/to/my/svg"。但不知何故，它不起作用。我在这里错过了什么？

这是我要展示的效果。

代码：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h4>Help me show the logo inside the square:</h4>
      <div className='logo-wrapper'>
        <svg className="logo-one ">
          <use xlinkHref="sprite.svg#icon-ua-logo"/>
        </svg>
      </div>
      <div 
        className='logo-wrapper'
        style={{marginTop: '3rem'}}>
        <svg className="logo-two ">
          <use xlinkHref="./ua-logo.svg"/>
        </svg>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

目录结构

src
  |_ index.js
  |_ styles.css
  |_ sprite.svg
  |_ ua-logo.svg

CSS

.App {
  font-family: sans-serif;
  text-align: center;
}

.logo {
  fill: black;
}

.logo-wrapper {
  height: 10rem;
  width: 10rem;
  background-color: lightgray;
  margin: 0 auto;
}

.logo-one {
  fill: black;
  height: 5rem;
  width: 5rem;
}

.logo-two {
  fill: black;
  height: 5rem;
  width: 5rem;
}

SVG

<svg>
  /*PLEASE REFER TO THE CODESANDBOX LINK BELOW*/
</svg>

这是codeSandbox的链接

【问题讨论】：

标签： css reactjs svg xlink

【解决方案1】：

我从去年的这篇文章中得到了答案。 React and SVG sprite

【讨论】：