Window Buttons wont render Aria-label svgs

[DFlowProductions]

Not sure what causes this and would love some help if anyone knows the issue, I'm using this stylesheet on a website built with vuejs installed it with npm and everything else works perfectly but loading the svg's for the buttons, any idea's on how to fix this? Also apologies im very new to webdev

[vtlanglois]

It seems like something is causing the svg-load functions used in 98.css's styles.css to fail to convert over to their url() equivalents on your app. From my understanding svg-load is a feature of PostCSS's postcss-inline-svg so either something failed with this repo converting svg-load to url() or there's a build step on your website that's causing the conversion not to occur.

I'm not as knowledgable on these parts myself, but it could lead you to a possible solution. I would check your vite.config and research if other Vue applications have had issues where svg-load or other PostCSS features didn't convert on the rendered page. I tried to replicate this issue on a local project and found the icons to render properly

/* Your Website */
.title-bar-controls button[aria-label=Maximize], .title-bar-controls button[aria-label].maximize {
    background-image: svg-load("./icon/maximize.svg");
    background-repeat: no-repeat;
    background-position: top 2px left 3px;

/* Demo Page */
.title-bar-controls button[aria-label=Maximize], .title-bar-controls button[aria-label].maximize {
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E);
    background-position: top 2px left 3px;
    background-repeat: no-repeat;

No need to apologize, breaking things and figuring out why it broke is one of the best ways to learn