SVG sprite icon not showing when I deployed the web app. On the console when you inspect, they are there, but not showing, I noticed the svg icon has its height x width = 0x0. I don't experience this problem when working on the code editor.

I tested the dist folder, for the build via live-server in VS Code. The svg does not show for build. I also have an image that doesn’t show, same as the svg. Both are located in the same image folder as the svg sprite. It behaves like it is a path problem, like the location is empty but it can't be, because my logo from the same folder loads. It could also be the bundler I use, Parcel.

icon not showing with height x width = 0x0

a generic image should load when API image is N/A

My app is a single page application built with Javascript-modules, html, sass and parcel. I imported the svg sprite and a jpg image from the img folder. The html for each render is written with Javascript

import icons from "url:../../img/sprite.svg";
import poster from "url:../../img/background/generic-poster.jpg";

The script for my package.json looks like this, maybe there is something wrong with the build process

"scripts": {
    "clean:output": "rimraf dist",
    "start": "parcel index.html",
    "build": "parcel build index.html --dist-dir ./dist"
  },

My home page isn't written in JavaScript and it still has the same problem of icon not showing.

<header class="header">
            <a class="header__logo--link"><img src="src/img/popcorn-2.png" class="header__logo" alt="logo" />
            </a>
            <form class="search">
                <input type="text" class="search__field" placeholder="Your movie awaits..." />
                <button class="btn btn--search">
                    <div class="svg__icon-box">
                        <svg class="svg__icon svg__icon--search">
                            <use href="src/img/sprite.svg#icon-search"></use>
                        </svg>
                    </div>
                </button>
            </form>

            <button class="btn btn--watchlist">
                <div class="svg__icon-box">
                    <svg class="svg__icon svg__icon--bookmarks">
                        <use href="src/img/sprite.svg#icon-bookmarks1"></use>
                    </svg>
                    <span>Watchlist</span>
                </div>
            </button>
        </header>