svg is completely invisible in custom navigation bar

I'm trying to replicate Razer's website and I downloaded their razer icon as an svg.

import "./NavigationBar.css";
import { ReactComponent as Logo } from "./razer-ths-logo.svg";

const NavigationBar = () => {
    return (
        <div>
            <ul className="nav">
                <li>
                    <Logo />
                </li>
                <li>
                    <a href="a">Store</a>
                </li>
                <li>
                    <a href="a">PC</a>
                </li>
                <li>
                    <a href="a">Console</a>
                </li>
                <li>
                    <a href="a">Mobile</a>
                </li>
                <li>
                    <a href="a">Lifestyle</a>
                </li>
                <li>
                    <a href="a">Services</a>
                </li>
                <li>
                    <a href="a">Community</a>
                </li>
                <li>
                    <a href="a">Support</a>
                </li>
            </ul>
            <Logo />
        </div>
    );
}

export default NavigationBar;

.nav {
    background-color: black;
    width: 100%;
    list-style: none;
    margin-top: 0px;
    float: left;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
}

.nav li {
    display: inline-block;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.nav a {
    font-size: 16px;
    color: gray;
    cursor: pointer;
    text-decoration: none;
}

.nav a:hover {
    color: white;
}

This is what my current website looks like. The SVG should be within the circled blue area. How do I display it? Is the background color covering up the SVG? I've also displayed the SVG below my navigation bar and it works, so the issue is not with the SVG.

This seems to be because you did not give dimensions for the SVG image. When li has display: inline-block, the SVG image is rendered at 0x0 (according to Developer Tools.) Otherwise, the image is rendered at its full intrinsic size.

For this example, I gave the image width: 1em

.nav img {
width: 1em;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.nav {
background-color: black;
width: 100%;
list-style: none;
margin-top: 0px;
float: left;
padding-left: 0px;
padding-right: 0px;
text-align: center;
}
.nav li {
display: inline-block;
margin-left: 40px;
margin-right: 40px;
margin-top: 20px;
margin-bottom: 20px;
}
.nav a {
font-size: 16px;
color: gray;
cursor: pointer;
text-decoration: none;
}
.nav a:hover {
color: white;
}
.nav img {
width: 1em;
}

<!-- language: lang-html -->

<ul class="nav">
<li>
<img src="https://assets2.razerzone.com/images/phoenix/razer-ths-logo.svg">
</li>
<li>
<a href="#">Store</a>
</li>
<li>
<a href="#">PC</a>
</li>
<li>
<a href="#">Console</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Lifestyle</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Community</a>
</li>
<li>
<a href="#">Support</a>
</li>
</ul>

<!-- end snippet -->

To solve your issue there could be a couple of things:

A) The SVG Images is rendered or not: You could use 'inspect element' to see if it is either rendered or not. If it is not rendered, kindly use correct reference and URL link to import so that it is imported.

B) The SVG is rendered - then, the change the inside fill-color and color-of-border in svg file, you could open any SVG file -- in even notepad.

C) If still there is issue with collision with background, use CSS properties - to provide a white border to SVG Image, you'll be able to fix issue, once you confirm the image has been rendered.

I fixed this issue by adding the following

import logo from './razer-ths-logo.svg';

to the top.
I then set src={logo}
I'm not sure why this is the fix, but at least it works. I just copied this from the files right after you do npm-create.