Add phosphor pre-preprocessor, to improve readability of code

front/src/App.svelte

@@ -2,11 +2,9 @@
     import Router from 'svelte-spa-router';
     import { replace, link } from 'svelte-spa-router';
     import active from 'svelte-spa-router/active'
+    import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from 'phosphor-svelte';
+
     import routes from '%/routes.js';
-    import TwitterLogo from 'phosphor-svelte/lib/TwitterLogo';
-    import FacebookLogo from 'phosphor-svelte/lib/FacebookLogo';
-    import InstagramLogo from 'phosphor-svelte/lib/InstagramLogo';
-    import TiktokLogo from 'phosphor-svelte/lib/TiktokLogo';
     import Logo from '/LogoAlt.svg';
 
     const links = {

front/src/components/DropDown.svelte

@@ -1,5 +1,5 @@
 <script>
-    import CaretDown from "phosphor-svelte/lib/CaretDown";
+    import { CaretDown } from "phosphor-svelte";
 
     export let open = false;
     export let name;

front/src/components/MenuItem.svelte

@@ -1,11 +1,7 @@
 <script>
     import { link } from 'svelte-spa-router';
-    import Acorn from 'phosphor-svelte/lib/Acorn';
-    import Fish from 'phosphor-svelte/lib/Fish';
-    import Leaf from 'phosphor-svelte/lib/Leaf';
-    import Pepper from 'phosphor-svelte/lib/Pepper';
-    import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
-    import GrainsSlash from 'phosphor-svelte/lib/GrainsSlash';
+    import { Acorn, Fish, Leaf, Pepper, ArrowUpRight, GrainsSlash } from 'phosphor-svelte';
+    
     import LoadingImage from '/MenuItemLoadingAlt.svg';
 
     export let id;

front/src/lib/testData.js

@@ -29,7 +29,7 @@ export default Items = [
     },
     {
         name: "half eaten mouldy bread",
-        price: -9999,
+        price: -99,
         labels: ["nut"],
     },
     {

front/src/pages/Page404.svelte

@@ -1,5 +1,5 @@
 <script>
-    import SmileySad from "phosphor-svelte/lib/SmileySad";
+    import { SmileySad } from "phosphor-svelte";
 </script>
 
 <div>

front/src/pages/PageContact.svelte

@@ -1,5 +1,6 @@
 <script>
-    import PaperPlaneRight from "phosphor-svelte/lib/PaperPlaneRight";
+    import { PaperPlaneRight } from "phosphor-svelte";
+
     import DropDown from "%/components/DropDown.svelte";
     import { expandOnTyping } from "%/lib/utils.js";
 

front/src/pages/PageIndex.svelte

@@ -2,7 +2,8 @@
     import { onMount } from "svelte";
     import { link } from 'svelte-spa-router';
     import { map, tileLayer, marker } from 'leaflet';
-    import ArrowUpRight from "phosphor-svelte/lib/ArrowUpRight";
+    import { ArrowUpRight } from "phosphor-svelte";
+
     import MenuList from "%/components/MenuList.svelte";
     import { getPopularToday } from "%/lib/api.js";
     import BannerImage from '/BannerExampleImage.jpg';

front/src/pages/PageItem.svelte

@@ -32,12 +32,6 @@
     <MenuList items={items} />
 </div>
 
-<div class="spacer"></div>
-<div class="other">
-    <h2>Popular</h2>
-    <MenuList items={items} />
-</div>
-
 <style lang="scss">
     @import "%/styles/vars";
 

front/src/pages/PageMenu.svelte

@@ -1,5 +1,6 @@
 <script>
-    import ArrowClockwise from "phosphor-svelte/lib/ArrowClockwise";
+    import { ArrowClockwise } from "phosphor-svelte";
+
     import MenuList from "%/components/MenuList.svelte";
     import DropDown from "%/components/DropDown.svelte";
     import { getMenuItems } from "%/lib/api.js";

front/svelte.config.js

@@ -1,7 +1,11 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+import { phosphorSvelteOptimize } from "phosphor-svelte/preprocessor"
 
 export default {
-  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
-  // for more information about preprocessors
-  preprocess: vitePreprocess(),
+    // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+    // for more information about preprocessors
+    preprocess: [
+        phosphorSvelteOptimize(),
+        vitePreprocess()
+    ],
 }

front/vite.config.js

@@ -3,10 +3,13 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+    base: './',
     plugins: [
         svelte(),
     ],
-    base: './',
+    optimizeDeps: {
+        exclude: ["phosphor-svelte"],
+    },
     resolve: {
         alias: {
             '%': __dirname + '/src',