From 66808f868bcadb6df6f84438ea8c8f37de733074 Mon Sep 17 00:00:00 2001
From: aki <arisu@ieee.org>
Date: Sun, 19 Apr 2026 01:08:04 +0900
Subject: [PATCH] feat: add SVG support for Deepgram and Elevenlabs with Vue
 components

---
 .../web/src/components/provider-icon/icons.ts |  4 ++++
 conf/providers/deepgram-speech.yaml           |  1 +
 conf/providers/elevenlabs-speech.yaml         |  1 +
 internal/tts/registry.go                      |  2 ++
 packages/icons/icons/deepgram.svg             |  3 +++
 packages/icons/icons/elevenlabs.svg           |  4 ++++
 packages/icons/scripts/manifest.ts            |  2 ++
 packages/icons/src/icons/Deepgram.vue         | 17 +++++++++++++++
 packages/icons/src/icons/Elevenlabs.vue       | 21 +++++++++++++++++++
 packages/icons/src/index.ts                   |  2 ++
 10 files changed, 57 insertions(+)
 create mode 100644 packages/icons/icons/deepgram.svg
 create mode 100644 packages/icons/icons/elevenlabs.svg
 create mode 100644 packages/icons/src/icons/Deepgram.vue
 create mode 100644 packages/icons/src/icons/Elevenlabs.vue

diff --git a/apps/web/src/components/provider-icon/icons.ts b/apps/web/src/components/provider-icon/icons.ts
index ac71fb4d..a8599158 100644
--- a/apps/web/src/components/provider-icon/icons.ts
+++ b/apps/web/src/components/provider-icon/icons.ts
@@ -13,10 +13,12 @@ import {
   ClaudeColor,
   Cohere,
   CohereColor,
+  Deepgram,
   Deepseek,
   DeepseekColor,
   Doubao,
   DoubaoColor,
+  Elevenlabs,
   Fireworks,
   FireworksColor,
   Gemini,
@@ -83,6 +85,8 @@ export const iconMap: Record<string, Component> = {
   'google-brand-color': GoogleBrandColor,
   'deepseek': Deepseek,
   'deepseek-color': DeepseekColor,
+  'deepgram': Deepgram,
+  'elevenlabs': Elevenlabs,
   'groq': Groq,
   'huggingface': Huggingface,
   'huggingface-color': HuggingfaceColor,
diff --git a/conf/providers/deepgram-speech.yaml b/conf/providers/deepgram-speech.yaml
index c7ec348a..313572cc 100644
--- a/conf/providers/deepgram-speech.yaml
+++ b/conf/providers/deepgram-speech.yaml
@@ -1,5 +1,6 @@
 name: Deepgram Speech
 client_type: deepgram-speech
+icon: deepgram
 
 models:
   - model_id: deepgram-tts
diff --git a/conf/providers/elevenlabs-speech.yaml b/conf/providers/elevenlabs-speech.yaml
index 16e4d92d..ee09d69c 100644
--- a/conf/providers/elevenlabs-speech.yaml
+++ b/conf/providers/elevenlabs-speech.yaml
@@ -1,5 +1,6 @@
 name: ElevenLabs Speech
 client_type: elevenlabs-speech
+icon: elevenlabs
 
 models:
   - model_id: elevenlabs-tts
diff --git a/internal/tts/registry.go b/internal/tts/registry.go
index 25348e6c..8456dcd1 100644
--- a/internal/tts/registry.go
+++ b/internal/tts/registry.go
@@ -244,6 +244,7 @@ func defaultProviderDefinitions() []ProviderDefinition {
 		{
 			ClientType:  models.ClientTypeElevenLabsSpeech,
 			DisplayName: "ElevenLabs Speech",
+			Icon:        "elevenlabs",
 			Description: "ElevenLabs text-to-speech",
 			ConfigSchema: ConfigSchema{Fields: []FieldSchema{
 				secretField("api_key", "API Key", "ElevenLabs API key", true, 10),
@@ -296,6 +297,7 @@ func defaultProviderDefinitions() []ProviderDefinition {
 		{
 			ClientType:  models.ClientTypeDeepgramSpeech,
 			DisplayName: "Deepgram Speech",
+			Icon:        "deepgram",
 			Description: "Deepgram TTS",
 			ConfigSchema: ConfigSchema{Fields: []FieldSchema{
 				secretField("api_key", "API Key", "Deepgram API key", true, 10),
diff --git a/packages/icons/icons/deepgram.svg b/packages/icons/icons/deepgram.svg
new file mode 100644
index 00000000..24abe85e
--- /dev/null
+++ b/packages/icons/icons/deepgram.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path fill="currentColor" d="M11.203 24H1.517a.364.364 0 0 1-.258-.62l6.239-6.275a.37.37 0 0 1 .259-.108h3.52c2.723 0 5.025-2.127 5.107-4.845a5.004 5.004 0 0 0-4.999-5.148H7.613v4.646c0 .2-.164.364-.365.364H.968a.365.365 0 0 1-.363-.364V.364C.605.164.768 0 .969 0h10.416c6.684 0 12.111 5.485 12.01 12.187C23.293 18.77 17.794 24 11.202 24z"/>
+</svg>
diff --git a/packages/icons/icons/elevenlabs.svg b/packages/icons/icons/elevenlabs.svg
new file mode 100644
index 00000000..e567af50
--- /dev/null
+++ b/packages/icons/icons/elevenlabs.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="172 129 156 242" fill="none">
+  <path d="M314 355H271V145H314V355Z" fill="currentColor"/>
+  <path d="M229 355H186V145H229V355Z" fill="currentColor"/>
+</svg>
diff --git a/packages/icons/scripts/manifest.ts b/packages/icons/scripts/manifest.ts
index ce7fa5de..8142cf4a 100644
--- a/packages/icons/scripts/manifest.ts
+++ b/packages/icons/scripts/manifest.ts
@@ -18,6 +18,8 @@ const llmProviders: string[] = [
   ...withVariants('anthropic', []),
   ...withVariants('google', ['color', 'brand-color']),
   ...withVariants('deepseek', ['color']),
+  ...withVariants('deepgram', []),
+  ...withVariants('elevenlabs', []),
   ...withVariants('groq', []),
   ...withVariants('huggingface', ['color']),
   ...withVariants('lmstudio', []),
diff --git a/packages/icons/src/icons/Deepgram.vue b/packages/icons/src/icons/Deepgram.vue
new file mode 100644
index 00000000..c33a22ed
--- /dev/null
+++ b/packages/icons/src/icons/Deepgram.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    v-bind="$attrs"
+  ><path
+    fill="currentColor"
+    d="M11.203 24H1.517a.364.364 0 0 1-.258-.62l6.239-6.275a.37.37 0 0 1 .259-.108h3.52c2.723 0 5.025-2.127 5.107-4.845a5.004 5.004 0 0 0-4.999-5.148H7.613v4.646c0 .2-.164.364-.365.364H.968a.365.365 0 0 1-.363-.364V.364C.605.164.768 0 .969 0h10.416c6.684 0 12.111 5.485 12.01 12.187C23.293 18.77 17.794 24 11.202 24z"
+  /></svg>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{ size?: string | number }>(), { size: '1em' })
+defineOptions({ inheritAttrs: false })
+</script>
diff --git a/packages/icons/src/icons/Elevenlabs.vue b/packages/icons/src/icons/Elevenlabs.vue
new file mode 100644
index 00000000..73da46e6
--- /dev/null
+++ b/packages/icons/src/icons/Elevenlabs.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="172 129 156 242"
+    v-bind="$attrs"
+  ><path
+     d="M314 355H271V145H314V355Z"
+     fill="currentColor"
+   />
+    <path
+      d="M229 355H186V145H229V355Z"
+      fill="currentColor"
+    /></svg>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{ size?: string | number }>(), { size: '1em' })
+defineOptions({ inheritAttrs: false })
+</script>
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index 7dd2efc6..bc5b59e3 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -15,6 +15,7 @@ export { default as Claude } from './icons/Claude.vue'
 export { default as ClaudeColor } from './icons/ClaudeColor.vue'
 export { default as Cohere } from './icons/Cohere.vue'
 export { default as CohereColor } from './icons/CohereColor.vue'
+export { default as Deepgram } from './icons/Deepgram.vue'
 export { default as Deepseek } from './icons/Deepseek.vue'
 export { default as DeepseekColor } from './icons/DeepseekColor.vue'
 export { default as Dingtalk } from './icons/Dingtalk.vue'
@@ -22,6 +23,7 @@ export { default as Discord } from './icons/Discord.vue'
 export { default as Doubao } from './icons/Doubao.vue'
 export { default as DoubaoColor } from './icons/DoubaoColor.vue'
 export { default as Duckduckgo } from './icons/Duckduckgo.vue'
+export { default as Elevenlabs } from './icons/Elevenlabs.vue'
 export { default as Exa } from './icons/Exa.vue'
 export { default as ExaColor } from './icons/ExaColor.vue'
 export { default as Feishu } from './icons/Feishu.vue'