Svelte and SvelteKit demo for web component

README.md

@@ -73,6 +73,8 @@ Directory `iconify-icon-demo` contains demo packages that show usage of `iconify
 -   [Ember demo](./iconify-icon-demo/ember-icon-demo/) - demo using web component with Ember. Run `npm run build` to build demo and `npm run start` to start it.
 -   [React demo](./iconify-icon-demo/react-demo/) - demo using web component with React. Run `npm run dev` to start demo.
 -   [Next.js demo](./iconify-icon-demo/nextjs-demo/) - demo for web component with Next.js. Run `npm run dev` to start demo.
+-   [Svelte demo with Vite](./iconify-icon-demo/svelte-demo/) - demo for web component with Svelte using Vite. Run `npm run dev` to start demo.
+-   [SvelteKit demo](./iconify-icon-demo/sveltekit-demo/) - demo for web component with SvelteKit. Run `npm run dev` to start the demo.
 
 ### Iconify icon components
 
@@ -101,6 +103,7 @@ Deprecation status:
 
 -   SVG Framework: can be replaced with `iconify-icon`.
 -   React component: can be replaced with `iconify-icon` using `@iconify-icon/react` wrapper.
+-   Svelte component: can be replaced with `iconify-icon`, does not require Svelte specific wrapper.
 -   Ember component: can be replaced with `iconify-icon`, does not require Ember specific wrapper.
 
 To import web component, just import it once in your script, as per [`iconify-icon` README file](./iconify-icon/icon/README.md).

components-demo/sveltekit-demo/src/lib/header/Header.svelte

@@ -33,7 +33,7 @@
 
 	<div class="corner">
 		<a href="https://github.com/iconify/iconify/tree/master/packages/svelte">
-			<Icon icon="line-md:iconify2" title="Iconify" />
+			<Icon icon="line-md:iconify1" title="Iconify" />
 		</a>
 	</div>
 </header>

iconify-icon-demo/svelte-demo/.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/dist/
+/.vscode/
+.DS_Store

iconify-icon-demo/svelte-demo/README.md

@@ -0,0 +1,48 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+  `vite dev` and `vite build` wouldn't work in a SvelteKit environment, for example.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

iconify-icon-demo/svelte-demo/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte + TS + Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

iconify-icon-demo/svelte-demo/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "@iconify-icon/svelte-demo",
+	"version": "0.0.0",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"serve": "vite preview",
+		"check": "svelte-check --tsconfig ./tsconfig.json"
+	},
+	"devDependencies": {
+		"@iconify-icons/mdi-light": "^1.1.1",
+		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.35",
+		"@tsconfig/svelte": "^3.0.0",
+		"svelte": "^3.46.2",
+		"svelte-check": "^2.3.0",
+		"svelte-preprocess": "^4.10.2",
+		"tslib": "^2.3.1",
+		"typescript": "^4.6.3",
+		"vite": "^2.7.13"
+	}
+}

iconify-icon-demo/svelte-demo/src/App.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import Counter from './lib/Counter.svelte'
+  import 'iconify-icon';
+</script>
+
+<main>
+  <div class="logo">
+    <iconify-icon icon="logos:svelte-icon" />
+  </div>
+
+  <h1><iconify-icon icon="gg:hello" title="Hello" /> <iconify-icon icon="logos:typescript" title="TypeScript" /> <iconify-icon icon="emojione:heavy-heart-exclamation" title="!" /></h1>
+
+  <Counter />
+
+  <p>
+    Visit <a href="https://svelte.dev">svelte.dev <iconify-icon icon="line-md:external-link" inline mode="style" /></a> to learn how to build <iconify-icon icon="logos:svelte" inline />
+    apps.
+  </p>
+
+  <p>
+    Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit <iconify-icon icon="line-md:external-link" inline mode="style" /></a> for
+    the officially supported framework, also powered by Vite!
+  </p>
+</main>
+
+<style>
+  :root {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  main {
+    text-align: center;
+    padding: 1em;
+    margin: 0 auto;
+  }
+
+  .logo {
+    font-size: 16rem;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4rem;
+    font-weight: 100;
+    line-height: 1;
+    margin: 2rem auto;
+    max-width: 14rem;
+  }
+
+  h1 iconify-icon {
+    vertical-align: -0.125em;
+  }
+
+  p {
+    max-width: 14rem;
+    margin: 1rem auto;
+    line-height: 1.35;
+  }
+
+  @media (min-width: 480px) {
+    h1 {
+      max-width: none;
+    }
+
+    p {
+      max-width: none;
+    }
+  }
+</style>

iconify-icon-demo/svelte-demo/src/lib/Counter.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import plusIcon from '@iconify-icons/mdi-light/plus';
+
+
+  let count: number = 0
+  const increment = () => {
+    count += 1
+  }
+
+</script>
+
+<button on:click={increment}>
+  <iconify-icon icon={plusIcon} inline /> Clicks: {count}
+</button>
+
+<style>
+  button {
+    font-family: inherit;
+    font-size: inherit;
+    padding: 1em 2em;
+    color: #ff3e00;
+    background-color: rgba(255, 62, 0, 0.1);
+    border-radius: 2em;
+    border: 2px solid rgba(255, 62, 0, 0);
+    outline: none;
+    width: 200px;
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+  }
+
+  button:focus {
+    border: 2px solid #ff3e00;
+  }
+
+  button:active {
+    background-color: rgba(255, 62, 0, 0.2);
+  }
+</style>

iconify-icon-demo/svelte-demo/src/main.ts

@@ -0,0 +1,7 @@
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app')
+})
+
+export default app

iconify-icon-demo/svelte-demo/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

iconify-icon-demo/svelte-demo/svelte.config.js

@@ -0,0 +1,7 @@
+import sveltePreprocess from 'svelte-preprocess'
+
+export default {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: sveltePreprocess()
+}

iconify-icon-demo/svelte-demo/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+}

iconify-icon-demo/svelte-demo/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()]
+})

iconify-icon-demo/sveltekit-demo/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package

iconify-icon-demo/sveltekit-demo/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm init svelte@next
+
+# create a new project in my-app
+npm init svelte@next my-app
+```
+
+> Note: the `@next` is temporary
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+
+```bash
+npm run build
+```
+
+> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.

iconify-icon-demo/sveltekit-demo/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "@iconify-icon/sveltekit-demo",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "svelte-kit dev",
+		"build": "svelte-kit build",
+		"preview": "svelte-kit preview",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@iconify-icons/mdi-light": "^1.1.1",
+		"@sveltejs/kit": "next",
+		"@types/cookie": "^0.4.1",
+		"svelte": "^3.46.2",
+		"svelte-check": "^2.3.0",
+		"svelte-preprocess": "^4.10.2",
+		"tslib": "^2.3.1",
+		"typescript": "^4.6.3"
+	},
+	"type": "module",
+	"dependencies": {
+		"@fontsource/fira-mono": "^4.5.0",
+		"@lukeed/uuid": "^2.0.0",
+		"cookie": "^0.4.1"
+	}
+}

iconify-icon-demo/sveltekit-demo/src/app.css

@@ -0,0 +1,107 @@
+@import '@fontsource/fira-mono';
+
+:root {
+	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-mono: 'Fira Mono', monospace;
+	--pure-white: #ffffff;
+	--primary-color: #b9c6d2;
+	--secondary-color: #d0dde9;
+	--tertiary-color: #edf0f8;
+	--accent-color: #ff3e00;
+	--heading-color: rgba(0, 0, 0, 0.7);
+	--text-color: #444444;
+	--background-without-opacity: rgba(255, 255, 255, 0.7);
+	--column-width: 42rem;
+	--column-margin-top: 4rem;
+}
+
+body {
+	min-height: 100vh;
+	margin: 0;
+	background-color: var(--primary-color);
+	background: linear-gradient(
+		180deg,
+		var(--primary-color) 0%,
+		var(--secondary-color) 10.45%,
+		var(--tertiary-color) 41.35%
+	);
+}
+
+body::before {
+	content: '';
+	width: 80vw;
+	height: 100vh;
+	position: absolute;
+	top: 0;
+	left: 10vw;
+	z-index: -1;
+	background: radial-gradient(
+		50% 50% at 50% 50%,
+		var(--pure-white) 0%,
+		rgba(255, 255, 255, 0) 100%
+	);
+	opacity: 0.05;
+}
+
+#svelte {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+h1,
+h2,
+p {
+	font-weight: 400;
+	color: var(--heading-color);
+}
+
+p {
+	line-height: 1.5;
+}
+
+a {
+	color: var(--accent-color);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+h1 {
+	font-size: 2rem;
+	text-align: center;
+}
+
+h2 {
+	font-size: 1rem;
+}
+
+pre {
+	font-size: 16px;
+	font-family: var(--font-mono);
+	background-color: rgba(255, 255, 255, 0.45);
+	border-radius: 3px;
+	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
+	padding: 0.5em;
+	overflow-x: auto;
+	color: var(--text-color);
+}
+
+input,
+button {
+	font-size: inherit;
+	font-family: inherit;
+}
+
+button:focus:not(:focus-visible) {
+	outline: none;
+}
+
+@media (min-width: 720px) {
+	h1 {
+		font-size: 2.4rem;
+	}
+}

iconify-icon-demo/sveltekit-demo/src/app.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+		%svelte.head%
+	</head>
+	<body>
+		<div id="svelte">%svelte.body%</div>
+	</body>
+</html>

iconify-icon-demo/sveltekit-demo/src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@sveltejs/kit" />

iconify-icon-demo/sveltekit-demo/src/hooks.ts

@@ -0,0 +1,24 @@
+import cookie from 'cookie';
+import { v4 as uuid } from '@lukeed/uuid';
+import type { Handle } from '@sveltejs/kit';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const cookies = cookie.parse(event.request.headers.get('cookie') || '');
+	event.locals.userid = cookies.userid || uuid();
+
+	const response = await resolve(event);
+
+	if (!cookies.userid) {
+		// if this is the first time the user has visited this app,
+		// set a cookie so that we recognise them when they return
+		response.headers.set(
+			'set-cookie',
+			cookie.serialize('userid', event.locals.userid, {
+				path: '/',
+				httpOnly: true,
+			})
+		);
+	}
+
+	return response;
+};

iconify-icon-demo/sveltekit-demo/src/lib/Counter.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { spring } from 'svelte/motion';
+
+	let count = 0;
+
+	const displayed_count = spring();
+	$: displayed_count.set(count);
+	$: offset = modulo($displayed_count, 1);
+
+	function modulo(n: number, m: number) {
+		// handle negative numbers
+		return ((n % m) + m) % m;
+	}
+</script>
+
+<div class="counter">
+	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
+		<svg aria-hidden="true" viewBox="0 0 1 1">
+			<path d="M0,0.5 L1,0.5" />
+		</svg>
+	</button>
+
+	<div class="counter-viewport">
+		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
+			<strong style="top: -100%" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
+			<strong>{Math.floor($displayed_count)}</strong>
+		</div>
+	</div>
+
+	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
+		<svg aria-hidden="true" viewBox="0 0 1 1">
+			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
+		</svg>
+	</button>
+</div>
+
+<style>
+	.counter {
+		display: flex;
+		border-top: 1px solid rgba(0, 0, 0, 0.1);
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+		margin: 1rem 0;
+	}
+
+	.counter button {
+		width: 2em;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+		background-color: transparent;
+		color: var(--text-color);
+		font-size: 2rem;
+	}
+
+	.counter button:hover {
+		background-color: var(--secondary-color);
+	}
+
+	svg {
+		width: 25%;
+		height: 25%;
+	}
+
+	path {
+		vector-effect: non-scaling-stroke;
+		stroke-width: 2px;
+		stroke: var(--text-color);
+	}
+
+	.counter-viewport {
+		width: 8em;
+		height: 4em;
+		overflow: hidden;
+		text-align: center;
+		position: relative;
+	}
+
+	.counter-viewport strong {
+		position: absolute;
+		display: flex;
+		width: 100%;
+		height: 100%;
+		font-weight: 400;
+		color: var(--accent-color);
+		font-size: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.counter-digits {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
+</style>

iconify-icon-demo/sveltekit-demo/src/lib/form.ts

@@ -0,0 +1,60 @@
+// this action (https://svelte.dev/tutorial/actions) allows us to
+// progressively enhance a <form> that already works without JS
+export function enhance(
+	form: HTMLFormElement,
+	{
+		pending,
+		error,
+		result
+	}: {
+		pending?: (data: FormData, form: HTMLFormElement) => void;
+		error?: (res: Response, error: Error, form: HTMLFormElement) => void;
+		result: (res: Response, form: HTMLFormElement) => void;
+	}
+) {
+	let current_token: {};
+
+	async function handle_submit(e: Event) {
+		const token = (current_token = {});
+
+		e.preventDefault();
+
+		const body = new FormData(form);
+
+		if (pending) pending(body, form);
+
+		try {
+			const res = await fetch(form.action, {
+				method: form.method,
+				headers: {
+					accept: 'application/json'
+				},
+				body
+			});
+
+			if (token !== current_token) return;
+
+			if (res.ok) {
+				result(res, form);
+			} else if (error) {
+				error(res, null, form);
+			} else {
+				console.error(await res.text());
+			}
+		} catch (e) {
+			if (error) {
+				error(null, e, form);
+			} else {
+				throw e;
+			}
+		}
+	}
+
+	form.addEventListener('submit', handle_submit);
+
+	return {
+		destroy() {
+			form.removeEventListener('submit', handle_submit);
+		}
+	};
+}

iconify-icon-demo/sveltekit-demo/src/lib/header/Header.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { addIcon } from 'iconify-icon';
+	import { page } from '$app/stores';
+
+	addIcon('corner-left', {
+		body: '<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" fill="currentColor" />',
+		width: 2,
+		height: 3
+	});
+	addIcon('corner-right', {
+		body: '<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" fill="currentColor" />',
+		width: 2,
+		height: 3
+	});
+</script>
+
+<header>
+	<div class="corner">
+		<a href="https://kit.svelte.dev">
+			<iconify-icon icon="logos:svelte-icon" title="SvekteKit" />
+		</a>
+	</div>
+
+	<nav>
+		<iconify-icon icon="corner-left" />
+		<ul>
+			<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
+			<li class:active={$page.url.pathname === '/about'}><a sveltekit:prefetch href="/about">About</a></li>
+			<li class:active={$page.url.pathname === '/todos'}><a sveltekit:prefetch href="/todos">Todos</a></li>
+		</ul>
+		<iconify-icon icon="corner-right" />
+	</nav>
+
+	<div class="corner">
+		<a href="https://github.com/iconify/iconify/tree/master/packages/svelte">
+			<iconify-icon icon="line-md:iconify1" title="Iconify" />
+		</a>
+	</div>
+</header>
+
+<style>
+	header {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.corner {
+		width: 3em;
+		height: 3em;
+	}
+
+	.corner a {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	.corner iconify-icon {
+		font-size: 2em;
+	}
+
+	nav {
+		display: flex;
+		justify-content: center;
+		--background: rgba(255, 255, 255, 0.7);
+	}
+
+	nav iconify-icon {
+		font-size: 3em;
+		color: var(--background);
+	}
+
+	ul {
+		position: relative;
+		padding: 0;
+		margin: 0;
+		height: 3em;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		list-style: none;
+		background: var(--background);
+		background-size: contain;
+	}
+
+	li {
+		position: relative;
+		height: 100%;
+	}
+
+	li.active::before {
+		--size: 6px;
+		content: '';
+		width: 0;
+		height: 0;
+		position: absolute;
+		top: 0;
+		left: calc(50% - var(--size));
+		border: var(--size) solid transparent;
+		border-top: var(--size) solid var(--accent-color);
+	}
+
+	nav a {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		padding: 0 1em;
+		color: var(--heading-color);
+		font-weight: 700;
+		font-size: 0.8rem;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		text-decoration: none;
+		transition: color 0.2s linear;
+	}
+
+	a:hover {
+		color: var(--accent-color);
+	}
+</style>

iconify-icon-demo/sveltekit-demo/src/lib/header/svelte-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>

iconify-icon-demo/sveltekit-demo/src/lib/types.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Can be made globally available by placing this
+ * inside `global.d.ts` and removing `export` keyword
+ */
+export interface Locals {
+	userid: string;
+}

iconify-icon-demo/sveltekit-demo/src/routes/__layout.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import Header from '$lib/header/Header.svelte';
+	import '../app.css';
+</script>
+
+<Header />
+
+<main>
+	<slot />
+</main>
+
+<footer>
+	<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
+</footer>
+
+<style>
+	main {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		padding: 1rem;
+		width: 100%;
+		max-width: 1024px;
+		margin: 0 auto;
+		box-sizing: border-box;
+	}
+
+	footer {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 40px;
+	}
+
+	footer a {
+		font-weight: bold;
+	}
+
+	@media (min-width: 480px) {
+		footer {
+			padding: 40px 0;
+		}
+	}
+</style>

iconify-icon-demo/sveltekit-demo/src/routes/about.svelte

@@ -0,0 +1,50 @@
+<script context="module">
+	import { browser, dev } from '$app/env';
+
+	// we don't need any JS on this page, though we'll load
+	// it in dev so that we get hot module replacement...
+	export const hydrate = dev;
+
+	// ...but if the client-side router is already loaded
+	// (i.e. we came here from elsewhere in the app), use it
+	export const router = browser;
+
+	// since there's no dynamic data here, we can prerender
+	// it so that it gets served as a static asset in prod
+	export const prerender = true;
+</script>
+
+<svelte:head>
+	<title>About</title>
+</svelte:head>
+
+<div class="content">
+	<h1>About this app</h1>
+
+	<p>
+		This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
+		following into your command line and following the prompts:
+	</p>
+
+	<!-- TODO lose the @next! -->
+	<pre>npm init svelte@next</pre>
+
+	<p>
+		The page you're looking at is purely static HTML, with no client-side interactivity needed.
+		Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
+		the devtools network panel and reloading.
+	</p>
+
+	<p>
+		The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using
+		it with JavaScript disabled!
+	</p>
+</div>
+
+<style>
+	.content {
+		width: 100%;
+		max-width: var(--column-width);
+		margin: var(--column-margin-top) auto 0 auto;
+	}
+</style>

iconify-icon-demo/sveltekit-demo/src/routes/index.svelte

@@ -0,0 +1,59 @@
+<script context="module" lang="ts">
+	export const prerender = true;
+</script>
+
+<script lang="ts">
+	import Counter from '$lib/Counter.svelte';
+</script>
+
+<svelte:head>
+	<title>Home</title>
+</svelte:head>
+
+<section>
+	<h1>
+		<div class="welcome">
+			<picture>
+				<source srcset="svelte-welcome.webp" type="image/webp" />
+				<img src="svelte-welcome.png" alt="Welcome" />
+			</picture>
+		</div>
+
+		to your new<br />SvelteKit app
+	</h1>
+
+	<h2>
+		try editing <strong>src/routes/index.svelte</strong>
+	</h2>
+
+	<Counter />
+</section>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		flex: 1;
+	}
+
+	h1 {
+		width: 100%;
+	}
+
+	.welcome {
+		position: relative;
+		width: 100%;
+		height: 0;
+		padding: 0 0 calc(100% * 495 / 2048) 0;
+	}
+
+	.welcome img {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		display: block;
+	}
+</style>

iconify-icon-demo/sveltekit-demo/src/routes/todos/[uid].json.ts

@@ -0,0 +1,18 @@
+import { api } from './_api';
+import type { RequestHandler } from '@sveltejs/kit';
+import type { Locals } from '$lib/types';
+
+// PATCH /todos/:uid.json
+export const patch: RequestHandler<Locals> = async (event) => {
+	const data = await event.request.formData();
+
+	return api(event, `todos/${event.locals.userid}/${event.params.uid}`, {
+		text: data.get('text'),
+		done: data.has('done') ? !!data.get('done') : undefined,
+	});
+};
+
+// DELETE /todos/:uid.json
+export const del: RequestHandler<Locals> = async (event) => {
+	return api(event, `todos/${event.locals.userid}/${event.params.uid}`);
+};

iconify-icon-demo/sveltekit-demo/src/routes/todos/_api.ts

@@ -0,0 +1,56 @@
+import type { EndpointOutput, RequestEvent } from '@sveltejs/kit';
+import type { Locals } from '$lib/types';
+
+/*
+	This module is used by the /todos.json and /todos/[uid].json
+	endpoints to make calls to api.svelte.dev, which stores todos
+	for each user. The leading underscore indicates that this is
+	a private module, _not_ an endpoint — visiting /todos/_api
+	will net you a 404 response.
+
+	(The data on the todo app will expire periodically; no
+	guarantees are made. Don't use it to organise your life.)
+*/
+
+const base = 'https://api.svelte.dev';
+
+export async function api(
+	event: RequestEvent<Locals>,
+	resource: string,
+	data?: Record<string, unknown>
+): Promise<EndpointOutput> {
+	// user must have a cookie set
+	if (!event.locals.userid) {
+		return { status: 401 };
+	}
+
+	const res = await fetch(`${base}/${resource}`, {
+		method: event.request.method,
+		headers: {
+			'content-type': 'application/json',
+		},
+		body: data && JSON.stringify(data),
+	});
+
+	// if the request came from a <form> submission, the browser's default
+	// behaviour is to show the URL corresponding to the form's "action"
+	// attribute. in those cases, we want to redirect them back to the
+	// /todos page, rather than showing the response
+	if (
+		res.ok &&
+		event.request.method !== 'GET' &&
+		event.request.headers.get('accept') !== 'application/json'
+	) {
+		return {
+			status: 303,
+			headers: {
+				location: '/todos',
+			},
+		};
+	}
+
+	return {
+		status: res.status,
+		body: await res.json(),
+	};
+}

iconify-icon-demo/sveltekit-demo/src/routes/todos/index.json.ts

@@ -0,0 +1,32 @@
+import { api } from './_api';
+import type { RequestHandler } from '@sveltejs/kit';
+import type { Locals } from '$lib/types';
+
+// GET /todos.json
+export const get: RequestHandler<Locals> = async (event) => {
+	// event.locals.userid comes from src/hooks.js
+	const response = await api(event, `todos/${event.locals.userid}`);
+
+	if (response.status === 404) {
+		// user hasn't created a todo list.
+		// start with an empty array
+		return { body: [] };
+	}
+
+	return response;
+};
+
+// POST /todos.json
+export const post: RequestHandler<Locals> = async (event) => {
+	const data = await event.request.formData();
+
+	const response = await api(event, `todos/${event.locals.userid}`, {
+		// because index.svelte posts a FormData object,
+		// request.body is _also_ a (readonly) FormData
+		// object, which allows us to get form data
+		// with the `body.get(key)` method
+		text: data.get('text'),
+	});
+
+	return response;
+};

iconify-icon-demo/sveltekit-demo/src/routes/todos/index.svelte

@@ -0,0 +1,229 @@
+<script context="module" lang="ts">
+	import { enhance } from '$lib/form';
+	import type { Load } from '@sveltejs/kit';
+
+	// see https://kit.svelte.dev/docs#loading
+	export const load: Load = async ({ fetch }) => {
+		const res = await fetch('/todos.json');
+
+		if (res.ok) {
+			const todos = await res.json();
+
+			return {
+				props: { todos }
+			};
+		}
+
+		const { message } = await res.json();
+
+		return {
+			error: new Error(message)
+		};
+	};
+</script>
+
+<script lang="ts">
+	import { scale } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+
+	type Todo = {
+		uid: string;
+		created_at: Date;
+		text: string;
+		done: boolean;
+		pending_delete: boolean;
+	};
+
+	export let todos: Todo[];
+
+	async function patch(res: Response) {
+		const todo = await res.json();
+
+		todos = todos.map((t) => {
+			if (t.uid === todo.uid) return todo;
+			return t;
+		});
+	}
+</script>
+
+<svelte:head>
+	<title>Todos</title>
+</svelte:head>
+
+<div class="todos">
+	<h1>Todos</h1>
+
+	<form
+		class="new"
+		action="/todos.json"
+		method="post"
+		use:enhance={{
+			result: async (res, form) => {
+				const created = await res.json();
+				todos = [...todos, created];
+
+				form.reset();
+			}
+		}}
+	>
+		<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo" />
+	</form>
+
+	{#each todos as todo (todo.uid)}
+		<div
+			class="todo"
+			class:done={todo.done}
+			transition:scale|local={{ start: 0.7 }}
+			animate:flip={{ duration: 200 }}
+		>
+			<form
+				action="/todos/{todo.uid}.json?_method=patch"
+				method="post"
+				use:enhance={{
+					pending: (data) => {
+						todo.done = !!data.get('done');
+					},
+					result: patch
+				}}
+			>
+				<input type="hidden" name="done" value={todo.done ? '' : 'true'} />
+				<button class="toggle" aria-label="Mark todo as {todo.done ? 'not done' : 'done'}" />
+			</form>
+
+			<form
+				class="text"
+				action="/todos/{todo.uid}.json?_method=patch"
+				method="post"
+				use:enhance={{
+					result: patch
+				}}
+			>
+				<input aria-label="Edit todo" type="text" name="text" value={todo.text} />
+				<button class="save" aria-label="Save todo" />
+			</form>
+
+			<form
+				action="/todos/{todo.uid}.json?_method=delete"
+				method="post"
+				use:enhance={{
+					pending: () => (todo.pending_delete = true),
+					result: () => {
+						todos = todos.filter((t) => t.uid !== todo.uid);
+					}
+				}}
+			>
+				<button class="delete" aria-label="Delete todo" disabled={todo.pending_delete} />
+			</form>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.todos {
+		width: 100%;
+		max-width: var(--column-width);
+		margin: var(--column-margin-top) auto 0 auto;
+		line-height: 1;
+	}
+
+	.new {
+		margin: 0 0 0.5rem 0;
+	}
+
+	input {
+		border: 1px solid transparent;
+	}
+
+	input:focus-visible {
+		box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1);
+		border: 1px solid #ff3e00 !important;
+		outline: none;
+	}
+
+	.new input {
+		font-size: 28px;
+		width: 100%;
+		padding: 0.5em 1em 0.3em 1em;
+		box-sizing: border-box;
+		background: rgba(255, 255, 255, 0.05);
+		border-radius: 8px;
+		text-align: center;
+	}
+
+	.todo {
+		display: grid;
+		grid-template-columns: 2rem 1fr 2rem;
+		grid-gap: 0.5rem;
+		align-items: center;
+		margin: 0 0 0.5rem 0;
+		padding: 0.5rem;
+		background-color: white;
+		border-radius: 8px;
+		filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
+		transform: translate(-1px, -1px);
+		transition: filter 0.2s, transform 0.2s;
+	}
+
+	.done {
+		transform: none;
+		opacity: 0.4;
+		filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));
+	}
+
+	form.text {
+		position: relative;
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+
+	.todo input {
+		flex: 1;
+		padding: 0.5em 2em 0.5em 0.8em;
+		border-radius: 3px;
+	}
+
+	.todo button {
+		width: 2em;
+		height: 2em;
+		border: none;
+		background-color: transparent;
+		background-position: 50% 50%;
+		background-repeat: no-repeat;
+	}
+
+	button.toggle {
+		border: 1px solid rgba(0, 0, 0, 0.2);
+		border-radius: 50%;
+		box-sizing: border-box;
+		background-size: 1em auto;
+	}
+
+	.done .toggle {
+		background-image: url("data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+	}
+
+	.delete {
+		background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+		opacity: 0.2;
+	}
+
+	.delete:hover,
+	.delete:focus {
+		transition: opacity 0.2s;
+		opacity: 1;
+	}
+
+	.save {
+		position: absolute;
+		right: 0;
+		opacity: 0;
+		background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
+	}
+
+	.todo input:focus + .save,
+	.save:focus {
+		transition: opacity 0.2s;
+		opacity: 1;
+	}
+</style>

iconify-icon-demo/sveltekit-demo/static/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

iconify-icon-demo/sveltekit-demo/svelte.config.js

@@ -0,0 +1,15 @@
+import preprocess from 'svelte-preprocess';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://github.com/sveltejs/svelte-preprocess
+	// for more information about preprocessors
+	preprocess: preprocess(),
+
+	kit: {
+		// hydrate the <div id="svelte"> element in src/app.html
+		// target: '#svelte'
+	},
+};
+
+export default config;

iconify-icon-demo/sveltekit-demo/tsconfig.json

@@ -0,0 +1,37 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"moduleResolution": "node",
+		"module": "es2020",
+		"lib": ["es2020", "DOM"],
+		"target": "es2019",
+		/**
+			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
+			to enforce using \`import type\` instead of \`import\` for Types.
+			*/
+		"importsNotUsedAsValues": "error",
+		"isolatedModules": true,
+		"resolveJsonModule": true,
+		/**
+			To have warnings/errors of the Svelte compiler at the correct position,
+			enable source maps by default.
+			*/
+		"sourceMap": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"baseUrl": ".",
+		"allowJs": true,
+		"checkJs": true,
+		"paths": {
+			"$lib": ["src/lib"],
+			"$lib/*": ["src/lib/*"]
+		}
+	},
+	"include": [
+		"src/**/*.d.ts",
+		"src/**/*.js",
+		"src/**/*.ts",
+		"src/**/*.svelte"
+	]
+}