svg url doesnt compiled using parceljs

Question

I'm using parceljs to bundle my code. I'm trying to add an ajax loader while rendering data from the server.

but the SVG icons doenst appear. by inspecting the page I saw that the loader element exist but the SVG height and width are 0. I know that isn't a compatibility issue because different SVG icons are shown

I tried to trick the bundler and i add the URL of the SVG folder in the dist folder. so instead of

I wrote

export const renderLoader = parent => {
    let loader = `
        <div class="loader">
            <svg>
                <use href="./img/icons.svg#icon-cw"></use>
            </svg>
        </div>
    `
    parent.insertAdjacentHTML('afterbegin', loader);
}


.loader {
  margin: 5rem auto;
  text-align: center; }
  .loader svg {
    height: 5.5rem;
    width: 5.5rem;
    fill: #F59A83;
    transform-origin: 44% 50%;
    animation: rotate 1.5s infinite linear; }

@keyframes rotate {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

There isn't any console error