why cant i link to my svg sprite sheet?

I have made a svg sprite sheet which to begin with i was placing in my html document at the top.. anyway that i can do and thats all fine. The problem is when i put my sprite sheet into a separate svg file and then try and link to it from my <use> tag in my html document. i am certain i have the file path correct, as i have even now moved my .svg file to the same place as my html document and just wrote the name of the svg file and it still doesnt work.

this is my code in my html document....

<svg viewBox="0 0 25.998646 25.998646" class="shape" width="250px";> <use xlink:href="spritesheet.svg#icon-accessibility"></use> </svg>

<svg viewBox="0 0 256 256" x="48" y="0" class="shape" width="250px"> <use xlink:href="spritesheet.svg#icon-bootstrap"></use> </svg>

and in my svg sprite sheet i have my id's which i am linking to into my html find like you can see above... #bootstrap-icon and #icon-accessibility i know they work as when i have my spite sheet directly in my html document i can get my images to view fine, the same with the viewbox attribute that work ok when my svg sprite sheet is located in my html document.

i am getting this error in my console...

Unsafe attempt to load URL file:///Users/Ambermaria/Desktop/web_development_portfolio/spritesheet.svg#icon-accessibility from frame with URL file:///Users/Ambermaria/Desktop/web_development_portfolio/myskills.html. 'file:' URLs are treated as unique security origins.

i hope someone can make sense of this and help me out... i will be so grateful!!