Window Buttons wont render Aria-label svgs #226

Activity

1. vtlanglois commented on Apr 4, 2026

   

   vtlanglois

   on Apr 4, 2026

   Last edited by vtlanglois

   Collaborator

   More actions

   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