SPRITE SVG or SIMPLE SVG not displaying using xlinkHref in React using JSX

Question

I am having trouble displaying the SVG logo. I generated the svg using icomoon. I want to incorporate xlinkHref="path/to/my/svg" in my jsx code. But somehow, It's not working. What am I missing here?

This is the effect that I want to display.

Code:

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

Directory Structure

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>

This is the link to the codeSandbox

Answer 1

I got the answer from this last year's post. React and SVG sprite