fix(icons): fix icons.svg url (#769)

in #762 I forgot to set the absolute path for these; it fails on
subpages

routes/_components/Avatar.html

@@ -1,6 +1,6 @@
 {#if error}
 <svg class={computedClass} style={svgStyle} aria-hidden="true">
-  <use xlink:href="icons.svg#fa-user" />
+  <use xlink:href="/icons.svg#fa-user" />
 </svg>
 {:elseif $autoplayGifs}
   <LazyImage

routes/_components/DynamicPageBanner.html

@@ -3,7 +3,7 @@
 >
   {#if icon}
   <svg class="dynamic-page-banner-svg">
-    <use xlink:href="icons.svg{icon}" />
+    <use xlink:href="/icons.svg{icon}" />
   </svg>
   {/if}
   <h1 class="dynamic-page-title" aria-label={ariaTitle}>{title}</h1>

routes/_components/ExternalLink.html

@@ -5,7 +5,7 @@
    class={computedClass}>
   <slot></slot>{#if showIcon}
     <svg class="external-link-svg">
-      <use xlink:href="icons.svg#fa-external-link" />
+      <use xlink:href="/icons.svg#fa-external-link" />
     </svg>
   {/if}</a>
 <style>

routes/_components/IconButton.html

@@ -8,7 +8,7 @@
           delegate-key={delegateKey}
           focus-key={focusKey || ''} >
     <svg class="icon-button-svg {svgClassName || ''}" ref:svg>
-      <use xlink:href="icons.svg{href}" />
+      <use xlink:href="/icons.svg{href}" />
     </svg>
   </button>
 {:else}
@@ -21,7 +21,7 @@
           {disabled}
           on:click >
     <svg class="icon-button-svg {svgClassName || ''}" ref:svg>
-      <use xlink:href="icons.svg{href}" />
+      <use xlink:href="/icons.svg{href}" />
     </svg>
   </button>
 {/if}

routes/_components/LoadingSpinner.html

@@ -2,7 +2,7 @@
      style="width: {size}px; height: {size}px;"
      aria-label="Loading"
 >
-  <use xlink:href="icons.svg#fa-spinner" />
+  <use xlink:href="/icons.svg#fa-spinner" />
 </svg>
 <style>
   .loading-spinner-icon {

routes/_components/NavItem.html

@@ -7,7 +7,7 @@
     {#if name === 'notifications'}
     <div class="nav-link-svg-wrapper">
       <svg class="nav-link-svg">
-        <use xlink:href="icons.svg{svg}" />
+        <use xlink:href="/icons.svg{svg}" />
       </svg>
       {#if $hasNotifications}
       <span class="nav-link-notifications nav-link-notifications-digits-{notificationDigits}" aria-hidden="true">
@@ -17,7 +17,7 @@
     </div>
     {:else}
     <svg class="nav-link-svg">
-      <use xlink:href="icons.svg{svg}" />
+      <use xlink:href="/icons.svg{svg}" />
     </svg>
     {/if}
     <span class="nav-link-label">{label}</span>

routes/_components/NotLoggedInHome.html

@@ -3,7 +3,7 @@
     <div class="not-logged-in-home">
       <div class="banner">
         <svg aria-hidden="true" class="not-logged-in-home-svg">
-          <use xlink:href="icons.svg#pinafore-logo" />
+          <use xlink:href="/icons.svg#pinafore-logo" />
         </svg>
         <h1>Pinafore</h1>
       </div>

routes/_components/PlayVideoIcon.html

@@ -1,6 +1,6 @@
 <div class="play-video-icon {className || ''}">
   <svg class="play-video-icon-svg">
-    <use xlink:href="icons.svg#fa-play-circle" />
+    <use xlink:href="/icons.svg#fa-play-circle" />
   </svg>
 </div>
 <style>

routes/_components/community/PageListItem.html

@@ -1,7 +1,7 @@
 <li class="page-list-item">
   <a {href}>
     <svg class="page-list-item-svg">
-      <use xlink:href="icons.svg{icon}" />
+      <use xlink:href="/icons.svg{icon}" />
     </svg>
     <span aria-label={ariaLabel}>
       {label}

routes/_components/compose/ComposeButton.html

@@ -9,14 +9,14 @@
     <div class="compose-box-button-spinner"
          aria-hidden="true">
       <svg class="compose-box-button-svg {$postingStatus ? 'spin' : 'hidden'}">
-        <use xlink:href="icons.svg#fa-spinner" />
+        <use xlink:href="/icons.svg#fa-spinner" />
       </svg>
     </div>
 
     <div class="compose-box-button-compose {sticky ? '' : 'hidden'}"
          aria-hidden="true">
       <svg class="compose-box-button-svg">
-        <use xlink:href="icons.svg#fa-pencil" />
+        <use xlink:href="/icons.svg#fa-pencil" />
       </svg>
     </div>
   </button>

routes/_components/compose/ComposeMediaItem.html

@@ -5,7 +5,7 @@
             aria-label="Delete {shortName}"
             on:click="onDeleteMedia()" >
       <svg class="compose-media-delete-button-svg">
-        <use xlink:href="icons.svg#fa-times" />
+        <use xlink:href="/icons.svg#fa-times" />
       </svg>
     </button>
   </div>

routes/_components/dialog/components/GenericDialogList.html

@@ -3,14 +3,14 @@
   <li class="generic-dialog-list-item">
     <button class="generic-dialog-list-button" on:click="fire('click', item)">
       <svg class="generic-dialog-list-item-svg">
-        <use xlink:href="icons.svg{item.icon}" />
+        <use xlink:href="/icons.svg{item.icon}" />
       </svg>
       <span class="generic-dialog-list-button-span">
         {item.label}
       </span>
       {#if selectable}
         <svg class="generic-dialog-list-item-svg {item.selected ? '' : 'hidden'}" aria-hidden={!item.selected}>
-          <use xlink:href="icons.svg#fa-check" />
+          <use xlink:href="/icons.svg#fa-check" />
         </svg>
       {/if}
     </button>

routes/_components/dialog/components/ModalDialog.html

@@ -16,7 +16,7 @@
         <button class="close-dialog-button"
                 data-a11y-dialog-hide aria-label="Close dialog">
           <svg class="close-dialog-button-svg">
-            <use xlink:href="icons.svg#fa-times" />
+            <use xlink:href="/icons.svg#fa-times" />
           </svg>
         </button>
       </div>

routes/_components/search/Search.html

@@ -9,7 +9,7 @@
   </div>
   <button type="submit" class="primary search-button" aria-label="Search" disabled={$searchLoading}>
     <svg class="search-button-svg">
-      <use xlink:href="icons.svg#fa-search" />
+      <use xlink:href="/icons.svg#fa-search" />
     </svg>
   </button>
 </form>

routes/_components/settings/SettingsListItem.html

@@ -2,7 +2,7 @@
   <a {href}>
     {#if icon}
     <svg class="settings-list-item-svg">
-      <use xlink:href="icons.svg{icon}" />
+      <use xlink:href="/icons.svg{icon}" />
     </svg>
     {/if}
     <span aria-label={ariaLabel || label} class={offsetForIcon ? 'offset-for-icon' : ''}>

routes/_components/status/StatusDetails.html

@@ -26,7 +26,7 @@
      href="/statuses/{originalStatusId}/reblogs"
      aria-label={reblogsLabel}>
     <svg class="status-favs-reblogs-svg">
-      <use xlink:href="icons.svg#fa-retweet"/>
+      <use xlink:href="/icons.svg#fa-retweet"/>
     </svg>
     <span>{numReblogs}</span>
   </a>
@@ -34,7 +34,7 @@
      href="/statuses/{originalStatusId}/favorites"
      aria-label={favoritesLabel}>
     <svg class="status-favs-reblogs-svg">
-      <use xlink:href="icons.svg#fa-star" />
+      <use xlink:href="/icons.svg#fa-star" />
     </svg>
     <span>{numFavs}</span>
   </a>

routes/_components/status/StatusHeader.html

@@ -3,7 +3,7 @@
     <Avatar {account} size="extra-small"/>
   </div>
   <svg class="status-header-svg">
-    <use xlink:href="icons.svg{icon}"/>
+    <use xlink:href="/icons.svg{icon}"/>
   </svg>
 
   <div class="status-header-content">

routes/_components/status/StatusMediaAttachments.html

@@ -7,7 +7,7 @@
           delegate-key={delegateKey} >
     <div class="svg-wrapper">
       <svg class="status-sensitive-media-svg">
-        <use xlink:href="icons.svg#fa-eye-slash" />
+        <use xlink:href="/icons.svg#fa-eye-slash" />
       </svg>
     </div>
   </button>
@@ -23,7 +23,7 @@
       </div>
       <div class="svg-wrapper">
         <svg class="status-sensitive-media-svg">
-          <use xlink:href="icons.svg#fa-eye" />
+          <use xlink:href="/icons.svg#fa-eye" />
         </svg>
       </div>
     </button>