change the base path

src/lib/components/CostMass.svelte

@@ -1,7 +1,8 @@
-<div class="mass">{mass}</div>
+<div class="mass">{mass}<img src="{base}/mass.svg" alt="mass"/></div>
 <div class="cost">{cost}</div>
 
 <script>
+    import { base } from '$app/paths';
   export let mass;
   export let cost;
 </script>
@@ -20,8 +21,7 @@
     content: "\00A4";
     margin-left: 0.5em;
   }
-  .mass:after {
+  .mass img {
-    content: url("/mass.svg");
     width: 0.75em;
     display: inline-block;
     margin-left: 0.5em;

src/lib/components/Mass.svelte

@@ -1,12 +1,12 @@
-<div>{mass}</div>
+<div>{mass}<img src={base+'/mass.svg'} alt="mass"/></div>
 
 <script>
+    import { base } from '$app/paths';
   export let mass = 0;
 </script>
 
 <style>
-  div:after {
+  img {
-    content: url("/mass.svg");
     width: 0.75em;
     display: inline-block;
     margin-left: 0.5em;

src/lib/components/Output/Print/Hull/Integrity/index.svelte

@@ -4,7 +4,7 @@
       {#each row as threshold, j (j)}
         <div class="cell">
           {#if threshold}
-            <img src="icons/crew-star.svg" alt="crew loss threshold" />
+            <img src="{base}/icons/crew-star.svg" alt="crew loss threshold" />
           {/if}
         </div>
       {/each}
@@ -13,6 +13,7 @@
 </div>
 
 <script>
+    import { base } from '$app/paths';
   export let shipMass = 0;
   export let rating = 0;
   export let advanced = false;

src/lib/components/Output/Print/MainSystems/index.svelte

@@ -1,27 +1,30 @@
 <div class="main_systems">
   {#if ftl !== "none"}
-    <img class="ftl" src="icons/ftl-drive.svg" alt="ftl drive" />
+    <img class="ftl" src="{base}/icons/ftl-drive.svg" alt="ftl drive" />
   {/if}
 
   {#if engine > 0}
-    <div class="thrust">{engine}</div>
+    <div class="thrust"
+            style="background-image: url({base}/icons/standard-drive.svg);"
+        >{engine}</div>
   {/if}
 
   <img
     class="internal"
-    src="icons/internal-systems.svg"
+    src="{base}/icons/internal-systems.svg"
     alt="internal systems"
   />
 </div>
 
 <script>
+    import { base } from '$app/paths';
+
   export let ftl = "none";
   export let engine = 0;
 </script>
 
 <style>
   .thrust {
-    background-image: url(icons/standard-drive.svg);
     width: 2em;
     background-size: 2em;
     background-repeat: no-repeat;

src/lib/components/Output/Print/Systems/Firecons/index.svelte

@@ -1,10 +1,11 @@
 <div>
   {#each range(1,firecons) as firecon}
-    <img class="firecon" src="icons/firecon.svg" alt="firecon" />
+    <img class="firecon" src="{base}/icons/firecon.svg" alt="firecon" />
   {/each}
 </div>
 
 <script>
+    import { base } from '$app/paths';
   import {range} from "$lib/utils.js";
 
   export let firecons = 0;

src/lib/components/Output/Print/Systems/Screens/index.svelte

@@ -1,13 +1,14 @@
 <div>
   {#each range(1,standard) as i}
-    <img src="icons/screen.svg" alt="screen" />
+    <img src="{base}/icons/screen.svg" alt="screen" />
   {/each}
   {#each range(1,advanced) as i}
-    <img src="icons/screen-advanced.svg" alt="advanced screen" />
+    <img src="{base}/icons/screen-advanced.svg" alt="advanced screen" />
   {/each}
 </div>
 
 <script>
+    import { base } from '$app/paths';
   import {range} from "$lib/utils.js";
 
   export let standard = 0;

src/lib/components/ShipEdit/ShipCost.svelte

@@ -1,7 +1,7 @@
 <div class="mass">
     <Field label="ship tonnage">
         <input class="short" bind:value={mass} type="number" min="10" max="300" />
-        <span class="mass_symbol" />
+        <img class="mass_symbol" src="{base}/mass.svg" alt="mass"/>
 
         <div class="note" class:warning={!withinBudget}>
             {#if withinBudget}
@@ -20,6 +20,7 @@
 </div>
 
 <script>
+    import { base } from '$app/paths';
     import { getContext } from "svelte";
     import Field from "$lib/components/Field/index.svelte";
 
@@ -55,8 +56,7 @@
         width: 5em;
         display: inline !important;
     }
-    .mass_symbol:after {
+    .mass_symbol {
-        content: url("/mass.svg");
         width: 0.75em;
         display: inline-block;
         margin-left: 0.5em;

src/lib/components/ShipItem/index.svelte

@@ -2,12 +2,14 @@
   <div><slot /></div>
 
   <div class="reqs">
-    <div class="mass" bind:this={mass_el}>{mass}</div>
+    <div class="mass" bind:this={mass_el}>{mass} <img src="{base}/mass.svg"
+            alt="mass"/></div>
     <div class="cost" bind:this={cost_el}>{cost}</div>
   </div>
 </div>
 
 <script>
+  import { base } from '$app/paths';
   import { tick } from "svelte";
 
   export let mass;
@@ -54,8 +56,7 @@
     content: "\00A4";
     margin-left: 0.5em;
   }
-  .mass:after {
+  .mass img {
-    content: url("/mass.svg");
     width: 0.75em;
     display: inline-block;
     margin-left: 0.5em;

src/lib/components/ShipSpecs/ShipCost.svelte

@@ -7,7 +7,7 @@
       min="10"
       max="300"
     />
-    <span class="mass_symbol" />
+    <img class="mass_symbol" src="{base}/mass.svg" alt="mass"/>
 
     <div class="note" class:warning={!within_budget}>
       {#if within_budget}
@@ -24,6 +24,7 @@
 </div>
 
 <script>
+    import { base } from '$app/paths';
   import { getContext } from "svelte";
   import Field from "$lib/components/Field/index.svelte";
 
@@ -49,8 +50,7 @@
   input {
     width: 5em;
   }
-  .mass_symbol:after {
+  .mass_symbol {
-    content: url("/mass.svg");
     width: 0.75em;
     display: inline-block;
     margin-left: 0.5em;