I'm struggling to get the SVG logo to display. I created the SVG using icomoon. I'm trying to use xlinkHref="path/to/my/svg" in my jsx code, but it just won't work. Can anyone point out what I might be missing?
Here's the desired effect:
https://i.sstatic.net/aUMsN.jpg
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>
For a live demo, check out this codeSandbox link