JSFiddle - React, Tailwind, and code Playground

HTML

<svg style="display:none;">
	<symbol id="home-icon" viewBox="0 0 512 512">
		<title>Home Icon</title>
		<path d="M512,296l-96-96V56h-64v80l-96-96L0,296v16h64v160h160v-96h64v96h160V312h64V296z"/>
	</symbol>
</svg>

<!-- this works -->
<svg class="home-icon">
    <use xlink:href="#home-icon"/>
</svg>

<!-- this doesn't -->
<!-- with a relative url "../images/svg-sprite.svg#home-icon" Chrome and safari does but Firefox doesn't -->
<!-- hosted the svg on google drive just to demonstrate but doesn't work anywhere in this fiddle -->
<svg class="home-icon">
    <use xlink:href="https://f740597b613b99340de21c4dc89cb8e59f26159f.googledrive.com/secure/AOjc2GMKPuZ5eUmLryyOe0XmqiD-EWTJhLnf4EUIbBbmDQ7IMwI-lkRqPZZwD1daMdoJzYls9kCijAsCesuPi-dJuK3s4RS19G7vjqnfRaZWoin74emJvT_vYGDRl_xr-PBNY3JH5Y21YM295snu6nmvj7D1ntcn0SqjkseVkxyZPXlPzpA1gvI4w-da5McWwu5bUZ8CefEcXrxzGAVEsNy8SO0ozmK5y1gACWrEEfMKhepsA1S6hioHaRZkWxlzLRzbLGut0cM-NxdHLMQGUMYcezzuExN7i8UcUVvyfT5oZpKRDm1ewB3PbbeNlNMmnHrqVaPxtXA7lyeskJOWm1Bk-STvdnXCENRyvh7MRVBvubkoKAqWNYYoKHNXy3-B_BBQvuIui2HTf-P-MMxlkA-Li4t551dNut-4Jitq3ZEeWCyjie_YAHg86-l_LJioKABbnWbT34sqtBsvXwCQgSeoT4DL1cPdk1hU6-4MXJXTdxzLF3hZY0Ux0u2RUITaB1VjMl7W-z9pd8o1ycThZp8wYCzye0X1sCiB1BfzvOSFGVhylIuVH9eIscvRg_Yg7OvfM0Z3lMOT/host/0B3rf5ErcH6WWfmNuS1d3VWFNOV9tSGhfNHdta0FrajRQNXhHNURib3Ntc3ItSUZwZGs2XzA/svg-icons.svg#home-icon"/>
</svg>

CSS

.home-icon {
  height: 100px;
  width: 100px;
  cursor: pointer;
  fill : #999;
}
.home-icon:hover{
    fill: #000;
}