Best way to import SVG icons into a Svelte app

The following approach has these advantages: One central point to maintain all your icons for your app Reduced network requests for fetching SVG icons Reusable icons throughout the app without having duplicate svg elements Have a dedicated Icon.svelte component setup like this: <script> export let name; export let width = “1rem”; export let height = … Read more

How to change the default port 5000 in Svelte?

The sveltejs/template uses sirv-cli. You can add –port or -p in your start:dev script in package.json. Instead of: “start:dev”: “sirv public –single –dev” Use: “start:dev”: “sirv public –single –dev –port 5555” You can see more of sirv-cli options:

How to persist svelte store

You can manually create a subscription to your store and persist the changes to localStorage and also use the potential value in localStorage as default value. Example <script> import { writable } from “svelte/store”; const store = writable(localStorage.getItem(“store”) || “”); store.subscribe(val => localStorage.setItem(“store”, val)); </script> <input bind:value={$store} />

How to pass parameters to on:click in Svelte?

TL;DR Just wrap the handler function in another function. For elegancy, use arrow function. You have to use a function declaration and then call the handler with arguments. Arrow function are elegant and good for this scenario. WHY do I need another function wrapper? If you would use just the handler and pass the parameters, … Read more