stack secrets from external providers (1Password, HashiCorp Vault, Infisical and Doppler)

src/lib/components/provider-icons/Doppler.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { class: className = 'w-4 h-4' }: { class?: string } = $props();
+</script>
+
+<svg viewBox="1 0 99.6 99.7" xmlns="http://www.w3.org/2000/svg" class={className} fill="currentColor">
+	<path d="M64.3.3A7.5 7.5 0 0 0 55 6l-4 19.3a32 32 0 0 1-25 25l-19 4a7.5 7.5 0 1 0 4 14.5l18.3-6c12.3-4.1 25.8-.5 34.3 9.1l13 14.5a7.5 7.5 0 1 0 10.6-10.6l-14.6-13a32 32 0 0 1-9.2-34.4l6.1-18.5c1.4-4.1-1-8.5-5.2-9.6"/>
+	<path d="M14.2 24.4A8 8 0 1 1 25.6 13l9.8 10.8A7.4 7.4 0 0 1 25 34z"/>
+	<path d="M90 30.4A8 8 0 1 1 94.2 46L80 49a7.4 7.4 0 0 1-3.8-14.2z"/>
+	<path d="M46.6 93.3A8 8 0 1 1 31 89.2l4.4-13.9a7.4 7.4 0 0 1 14.2 3.8z"/>
+</svg>

src/lib/components/provider-icons/HashiCorpVault.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	let { class: className = 'w-4 h-4' }: { class?: string } = $props();
+</script>
+
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class={className} fill="currentColor">
+	<path d="M0 0l7.971 15.516L16 0H0zm6.732 6.16h-1.27V4.89h1.27v1.27zm0-1.906h-1.27V2.985h1.27v1.269zm1.904 3.81h-1.27v-1.27h1.27v1.27zm0-1.905h-1.27V4.89h1.27v1.27zm0-1.905h-1.27V2.985h1.27v1.269zm1.894 1.905H9.26V4.89h1.27v1.27zM9.26 4.254V2.985h1.27v1.269H9.26z"/>
+</svg>

src/lib/components/provider-icons/Infisical.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	let { class: className = 'w-4 h-4' }: { class?: string } = $props();
+</script>
+
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class={className} fill="currentColor">
+	<path d="M477.8 173.6c-22.1-22.2-51.5-34.5-82.7-34.5-29.5 0-59.5 12.8-89.4 38.1-21.2 17.9-38 38.6-49.7 55.2-10.2-13.7-26.2-33.2-46.6-51.3-14.9-13.4-29.8-23.9-44.2-31.2-16.7-8.5-32.9-12.8-48-12.8-31.3 0-60.8 12.2-82.9 34.5S0 223.5 0 255s12.2 61.2 34.3 83.5c22.2 22.2 51.6 34.5 82.9 34.5 35.4 0 70.7-25.2 94.1-46.3 20.5-18.6 35.9-37.5 45-49.7 16.2 22.3 35 46.1 55.4 63.9 26.7 23.3 53.2 34.1 83.4 34.1 31.2 0 60.5-12.3 82.7-34.6 22.1-22.2 34.3-51.9 34.3-83.4s-12.2-61.1-34.3-83.4M180.8 293c-24.4 22-47.5 34.6-63.6 34.6-39.6 0-71.8-32.6-71.8-72.6s32.2-72.6 71.8-72.6c16.5 0 38.5 11.6 62 32.5 12.6 11.2 25.5 25.3 36.9 40-10.5 13.4-23 27-35.3 38.1M395 329.5c-18.8 0-35.4-7-53.6-22.9C328 295 314.1 279 296 254.5c12.1-16.6 25.4-31.2 39-42.9 21.1-17.8 41.9-27.3 60-27.3 39.5 0 71.6 32.6 71.6 72.6s-32.1 72.6-71.6 72.6"/>
+</svg>

src/lib/components/provider-icons/OnePassword.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	let { class: className = 'w-4 h-4' }: { class?: string } = $props();
+</script>
+
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class={className} fill="currentColor" role="img">
+	<path d="M10.51,10.013V7.299c0-0.306,0.248-0.554,0.554-0.554h1.911c0.306,0,0.554,0.248,0.554,0.554v4.968 c0,0.076-0.038,0.134-0.076,0.191l-0.478,0.478c-0.115,0.115-0.115,0.287,0,0.382l0.478,0.478c0.057,0.057,0.076,0.115,0.076,0.191 v2.713c0,0.306-0.248,0.554-0.554,0.554h-1.911c-0.306,0-0.554-0.248-0.554-0.554v-4.968c0-0.076,0.038-0.134,0.076-0.191 l0.478-0.478c0.115-0.115,0.115-0.287,0-0.382l-0.478-0.478C10.529,10.146,10.51,10.089,10.51,10.013z M19.127,12 c0-3.936-3.191-7.127-7.127-7.127S4.873,8.064,4.873,12S8.064,19.127,12,19.127S19.127,15.936,19.127,12z M21.382,12 c0,5.178-4.204,9.363-9.363,9.363c-5.178,0-9.363-4.204-9.363-9.363c0-5.178,4.204-9.363,9.363-9.363 C17.178,2.637,21.382,6.822,21.382,12z M0.764,12c0,6.21,5.025,11.236,11.236,11.236S23.236,18.21,23.236,12S18.21,0.764,12,0.764 S0.764,5.79,0.764,12z M0,12C0,5.369,5.369,0,12,0c6.631,0,12,5.369,12,12s-5.369,12-12,12S0,18.631,0,12z"/>
+</svg>

src/lib/components/provider-icons/index.ts

@@ -0,0 +1,23 @@
+import type { Component } from 'svelte';
+import { KeyRound } from 'lucide-svelte';
+import OnePassword from './OnePassword.svelte';
+import Infisical from './Infisical.svelte';
+import HashiCorpVault from './HashiCorpVault.svelte';
+import Doppler from './Doppler.svelte';
+
+/** Brand icon for a secret-provider type. Falls back to a generic key icon. */
+export function getProviderIcon(type: string): Component {
+	switch (type) {
+		case 'op-service-account':
+		case 'op-connect':
+			return OnePassword;
+		case 'infisical':
+			return Infisical;
+		case 'vault':
+			return HashiCorpVault;
+		case 'doppler':
+			return Doppler;
+		default:
+			return KeyRound; // any future provider until it has a brand icon
+	}
+}