SVG sprite icons are not showing up

Support
1

My issue is that the deployed website doesn’t show the SVG sprite icons despite being in the dist folder live-link

image
should be SVG icons here

The SVG sprite already exists in the dist folder but does not show any icons

9:18:16 AM: ✨ Built in 1.71s
9:18:16 AM: dist/index.html                  4 kB    220ms
9:18:16 AM: dist/favicon.38ab3f7a.png     8.44 kB    166ms
9:18:16 AM: dist/logo.0240107d.png       57.24 kB    411ms
9:18:16 AM: dist/icons.c5b0f01c.svg         119 B    188ms
9:18:16 AM: dist/index.ee92b370.css      10.12 kB    233ms
9:18:16 AM: dist/index.a603a436.js       33.47 kB    225ms
9:18:16 AM: dist/icons.c5b0f01c.svg         119 B    540ms
9:18:16 AM: ​

I using :

<svg class="nav__icon">
      <use xlink:href="src/img/icons.svg#icon-bookmark"></use>
</svg>

<svg class="nav__icon">
      <use href="src/img/icons.svg#icon-bookmark"></use>
</svg>

but nothing worked

2

I don’t think you’d have a src folder in your deployed output. Based on this path:

the URL should be /icons.c5b.... But that URL would change per build, so you should be using the imported variable directly in there. This is not a Netlify issue, but a better question for a web-dev forum if you’re still having questions.

3

thanks for your reply I meant here

that I used href and xlink:href and for the destination It’s already updated by parcel and here’s the new path:

image
image788×157 7.47 KB

the favicon and the img are appearing correctly but the SVGs aren’t appearing at all!