Merge pull request #12505 from Turbo87/svelte-svgs

Turbo87 · web-flow · commit cf65ec4fbf84 · 2025-12-15T17:53:41.000+01:00
svelte: Use `@poppanator/sveltekit-svg` for inline SVG support
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/svelte/package.json b/svelte/package.json
@@ -19,6 +19,7 @@
     "@eslint/compat": "2.0.0",
     "@eslint/js": "9.39.1",
     "@ianvs/prettier-plugin-sort-imports": "4.7.0",
+    "@poppanator/sveltekit-svg": "^6.0.1",
     "@sveltejs/adapter-static": "3.0.10",
     "@sveltejs/kit": "2.49.2",
     "@sveltejs/vite-plugin-svelte": "6.2.1",
diff --git a/svelte/src/app.d.ts b/svelte/src/app.d.ts
@@ -1,3 +1,5 @@
+import '@poppanator/sveltekit-svg/dist/svg.d.ts';
+
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
diff --git a/svelte/src/lib/assets/lock.svg b/svelte/src/lib/assets/lock.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="13" viewBox="0 0 10 13" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1.0102859,6 C1.03905014,4.33379691 1.13776768,3.49239071 1.42224585,2.6000634 C1.95609947,0.925516001 3.14318008,1.38283345e-10 5,-1.42108547e-14 C6.85681992,-1.38311491e-10 8.04390053,0.925516001 8.57775415,2.6000634 C8.86223232,3.49239071 8.96094986,4.33379691 8.9897141,6 L10,6 L10,13 L0,13 L0,6 L1.0102859,6 Z M3,6 L7,6 C7,4.19107867 6.94223555,3.4941306 6.67224585,2.87821705 C6.3955179,2.24693189 5.96002992,2 5,2 C3.32473074,2 3,2.74079144 3,6 Z" fill="currentColor" />
+</svg>
diff --git a/svelte/src/lib/components/Header.svelte b/svelte/src/lib/components/Header.svelte
@@ -2,6 +2,7 @@
   import { resolve } from '$app/paths';
 
   import logo from '$lib/assets/cargo.png';
+  import LockIcon from '$lib/assets/lock.svg?component';
 
   // TODO: import ColorSchemeMenu from './ColorSchemeMenu.svelte';
   // TODO: import Dropdown from './Dropdown.svelte';
@@ -10,7 +11,6 @@
   // TODO: import UserAvatar from './UserAvatar.svelte';
 
   // TODO: import session service
-  // TODO: import lock icon SVG
 
   interface Props {
     hero?: boolean;
@@ -57,7 +57,7 @@
       <!--   <Dropdown data-test-user-menu> ... </Dropdown> -->
       <!-- {:else} -->
       <button type="button" class="login-button button-reset" data-test-login-button>
-        <!-- TODO: add lock icon -->
+        <LockIcon />
         Log in with GitHub
       </button>
       <!-- {/if} -->
@@ -245,13 +245,11 @@
     */
   }
 
-  /* TODO: uncomment when lock icon is added
-  .login-icon {
+  .login-button :global(svg) {
     width: 1em;
     margin-right: var(--space-2xs);
     opacity: 0.5;
   }
-  */
 
   /* TODO: uncomment when UserAvatar is implemented
   .avatar {
diff --git a/svelte/vite.config.ts b/svelte/vite.config.ts
@@ -1,9 +1,10 @@
+import svg from '@poppanator/sveltekit-svg';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { playwright } from '@vitest/browser-playwright';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [sveltekit(), svg()],
 
   test: {
     expect: { requireAssertions: true },

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import '@poppanator/sveltekit-svg/dist/svg.d.ts';`
	`2`	`+`
`1`	`3`	`// See https://svelte.dev/docs/kit/types#app.d.ts`
`2`	`4`	`// for information about these interfaces`
`3`	`5`	`declare global {`