css - 使用 JSX 在 React 中使用 xlinkHref 不显示 SPRITE SVG 或 SIMPLE SVG

Question

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

这就是我想要展示的效果。

代码：

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的链接

标签： cssreactjssvgxlink

Answer 1

我从去年的帖子中得到了答案。 React 和 SVG 精灵