Allow more control over ImageInput preview size

src/packager/ImageInput.svelte

@@ -134,7 +134,7 @@
     <div class="selected">
       {#each previewSizes as size}
         <!-- svelte-ignore a11y-missing-attribute -->
-        <img src={url} width={size} height={size}>
+        <img src={url} width={size[0]} height={size[1]}>
       {/each}
       <div>{$_('fileInput.selected').replace('{file}', file.name)}</div>
       <button on:click={clear}>{$_('fileInput.clear')}</button>

src/packager/PackagerOptions.svelte

@@ -248,7 +248,7 @@
   </label>
   <div>
     {$_('options.icon')}
-    <ImageInput bind:file={$icon} previewSizes={[64, 32, 16]} />
+    <ImageInput bind:file={$icon} previewSizes={[[64, 64], [32, 32], [16, 16]]} />
   </div>
 
   <h3>{$_('options.loadingScreen')}</h3>
@@ -258,7 +258,8 @@
   </label>
   <div>
     {$_('options.loadingScreenImage')}
-    <ImageInput bind:file={$loadingScreenImage} previewSizes={[64]} />
+    <!-- Display preview at native size -->
+    <ImageInput bind:file={$loadingScreenImage} previewSizes={[['', '']]} />
   </div>
 
   <h3>{$_('options.controls')}</h3>
@@ -307,7 +308,7 @@
   </div>
   {#if $options.cursor.type === 'custom'}
     <div in:slide|self>
-      <ImageInput bind:file={$customCursorIcon} previewSizes={[32, 16]} />
+      <ImageInput bind:file={$customCursorIcon} previewSizes={[[32, 32], [16, 16]]} />
       <p>{$_('options.cursorHelp')}</p>
     </div>
   {/if}