feat: add SVG support for Deepgram and Elevenlabs with Vue components

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,

conf/providers/deepgram-speech.yaml

@@ -1,5 +1,6 @@
 name: Deepgram Speech
 client_type: deepgram-speech
+icon: deepgram
 
 models:
   - model_id: deepgram-tts

conf/providers/elevenlabs-speech.yaml

@@ -1,5 +1,6 @@
 name: ElevenLabs Speech
 client_type: elevenlabs-speech
+icon: elevenlabs
 
 models:
   - model_id: elevenlabs-tts

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),

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>

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>

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', []),

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>

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>

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'