<template>
  <div class="lobe-icon" :style="wrapperStyle">
    <img
        v-if="svgSrc"
        :src="svgSrc"
        :alt="name"
        class="lobe-icon__img"
    />
    <div v-else class="lobe-icon__fallback" :style="fallbackStyle">
      {{ firstChar }}
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  name: { type: String, default: '' },
  variant: { type: String, default: 'Color' },
  size: { type: Number, default: 30 }
})

const svgSrc = ref('')

function normalize(name) {
  return name
    .toLowerCase()
    .replace(/\s+/g, '-')
    .replace(/[^a-z0-9-]/g, '')
}

const svgSrcMap = {
  ace: () => import('@lobehub/icons-static-svg/icons/ace.svg'),
  adobe: () => import('@lobehub/icons-static-svg/icons/adobe-color.svg'),
  adobefirefly: () => import('@lobehub/icons-static-svg/icons/adobefirefly-color.svg'),
  agentvoice: () => import('@lobehub/icons-static-svg/icons/agentvoice-color.svg'),
  agui: () => import('@lobehub/icons-static-svg/icons/agui-text.svg'),
  ai2: () => import('@lobehub/icons-static-svg/icons/ai2-color.svg'),
  ai21: () => import('@lobehub/icons-static-svg/icons/ai21-brand-color.svg'),
  ai302: () => import('@lobehub/icons-static-svg/icons/ai302-color.svg'),
  ai360: () => import('@lobehub/icons-static-svg/icons/ai360-color.svg'),
  aihubmix: () => import('@lobehub/icons-static-svg/icons/aihubmix-color.svg'),
  aimass: () => import('@lobehub/icons-static-svg/icons/aimass-color.svg'),
  aionlabs: () => import('@lobehub/icons-static-svg/icons/aionlabs-color.svg'),
  airjelly: () => import('@lobehub/icons-static-svg/icons/airjelly-color.svg'),
  aistudio: () => import('@lobehub/icons-static-svg/icons/aistudio.svg'),
  akashchat: () => import('@lobehub/icons-static-svg/icons/akashchat-color.svg'),
  alephalpha: () => import('@lobehub/icons-static-svg/icons/alephalpha-text.svg'),
  antgroup: () => import('@lobehub/icons-static-svg/icons/antgroup-brand-color.svg'),
  anthropic: () => import('@lobehub/icons-static-svg/icons/anthropic-text.svg'),
  antigravity: () => import('@lobehub/icons-static-svg/icons/antigravity-color.svg'),
  anyscale: () => import('@lobehub/icons-static-svg/icons/anyscale-color.svg'),
  apertis: () => import('@lobehub/icons-static-svg/icons/apertis-color.svg'),
  apple: () => import('@lobehub/icons-static-svg/icons/apple-text.svg'),
  arcee: () => import('@lobehub/icons-static-svg/icons/arcee-color.svg'),
  askverdict: () => import('@lobehub/icons-static-svg/icons/askverdict-color.svg'),
  assemblyai: () => import('@lobehub/icons-static-svg/icons/assemblyai-color.svg'),
  atlascloud: () => import('@lobehub/icons-static-svg/icons/atlascloud-text.svg'),
  automatic: () => import('@lobehub/icons-static-svg/icons/automatic-color.svg'),
  aws: () => import('@lobehub/icons-static-svg/icons/aws-brand-color.svg'),
  aya: () => import('@lobehub/icons-static-svg/icons/aya-color.svg'),
  azure: () => import('@lobehub/icons-static-svg/icons/azure-color.svg'),
  azureai: () => import('@lobehub/icons-static-svg/icons/azureai-color.svg'),
  baai: () => import('@lobehub/icons-static-svg/icons/baai-text.svg'),
  baichuan: () => import('@lobehub/icons-static-svg/icons/baichuan-color.svg'),
  baidu: () => import('@lobehub/icons-static-svg/icons/baidu-brand-color.svg'),
  baiducloud: () => import('@lobehub/icons-static-svg/icons/baiducloud-color.svg'),
  bailian: () => import('@lobehub/icons-static-svg/icons/bailian-color.svg'),
  baseten: () => import('@lobehub/icons-static-svg/icons/baseten-text.svg'),
  bedrock: () => import('@lobehub/icons-static-svg/icons/bedrock-color.svg'),
  bfl: () => import('@lobehub/icons-static-svg/icons/bfl-text.svg'),
  bilibili: () => import('@lobehub/icons-static-svg/icons/bilibili-color.svg'),
  bilibiliindex: () => import('@lobehub/icons-static-svg/icons/bilibiliindex-text.svg'),
  bing: () => import('@lobehub/icons-static-svg/icons/bing-color.svg'),
  briaai: () => import('@lobehub/icons-static-svg/icons/briaai-color.svg'),
  burncloud: () => import('@lobehub/icons-static-svg/icons/burncloud-color.svg'),
  bytedance: () => import('@lobehub/icons-static-svg/icons/bytedance-brand-color.svg'),
  capcut: () => import('@lobehub/icons-static-svg/icons/capcut-text.svg'),
  centml: () => import('@lobehub/icons-static-svg/icons/centml-brand-color.svg'),
  cerebras: () => import('@lobehub/icons-static-svg/icons/cerebras-brand-color.svg'),
  chatglm: () => import('@lobehub/icons-static-svg/icons/chatglm-color.svg'),
  cherrystudio: () => import('@lobehub/icons-static-svg/icons/cherrystudio-color.svg'),
  civitai: () => import('@lobehub/icons-static-svg/icons/civitai-color.svg'),
  claude: () => import('@lobehub/icons-static-svg/icons/claude-color.svg'),
  claudecode: () => import('@lobehub/icons-static-svg/icons/claudecode-color.svg'),
  cline: () => import('@lobehub/icons-static-svg/icons/cline-text.svg'),
  clipdrop: () => import('@lobehub/icons-static-svg/icons/clipdrop-text.svg'),
  cloudflare: () => import('@lobehub/icons-static-svg/icons/cloudflare-color.svg'),
  codebuddy: () => import('@lobehub/icons-static-svg/icons/codebuddy-color.svg'),
  codeflicker: () => import('@lobehub/icons-static-svg/icons/codeflicker-color.svg'),
  codegeex: () => import('@lobehub/icons-static-svg/icons/codegeex-color.svg'),
  codex: () => import('@lobehub/icons-static-svg/icons/codex-color.svg'),
  cogvideo: () => import('@lobehub/icons-static-svg/icons/cogvideo-color.svg'),
  cogview: () => import('@lobehub/icons-static-svg/icons/cogview-color.svg'),
  cohere: () => import('@lobehub/icons-static-svg/icons/cohere-color.svg'),
  colab: () => import('@lobehub/icons-static-svg/icons/colab-color.svg'),
  cometapi: () => import('@lobehub/icons-static-svg/icons/cometapi-color.svg'),
  comfyui: () => import('@lobehub/icons-static-svg/icons/comfyui-color.svg'),
  commanda: () => import('@lobehub/icons-static-svg/icons/commanda-color.svg'),
  copilot: () => import('@lobehub/icons-static-svg/icons/copilot-color.svg'),
  copilotkit: () => import('@lobehub/icons-static-svg/icons/copilotkit-color.svg'),
  coqui: () => import('@lobehub/icons-static-svg/icons/coqui-color.svg'),
  coze: () => import('@lobehub/icons-static-svg/icons/coze-text.svg'),
  crewai: () => import('@lobehub/icons-static-svg/icons/crewai-brand-color.svg'),
  crusoe: () => import('@lobehub/icons-static-svg/icons/crusoe-color.svg'),
  cursor: () => import('@lobehub/icons-static-svg/icons/cursor-text.svg'),
  cybercut: () => import('@lobehub/icons-static-svg/icons/cybercut-text.svg'),
  dalle: () => import('@lobehub/icons-static-svg/icons/dalle-color.svg'),
  dbrx: () => import('@lobehub/icons-static-svg/icons/dbrx-brand-color.svg'),
  deepai: () => import('@lobehub/icons-static-svg/icons/deepai-text.svg'),
  deepcogito: () => import('@lobehub/icons-static-svg/icons/deepcogito-color.svg'),
  deepinfra: () => import('@lobehub/icons-static-svg/icons/deepinfra-color.svg'),
  deepl: () => import('@lobehub/icons-static-svg/icons/deepl-color.svg'),
  deepmind: () => import('@lobehub/icons-static-svg/icons/deepmind-color.svg'),
  deepseek: () => import('@lobehub/icons-static-svg/icons/deepseek-color.svg'),
  devin: () => import('@lobehub/icons-static-svg/icons/devin-color.svg'),
  dify: () => import('@lobehub/icons-static-svg/icons/dify-color.svg'),
  doc2x: () => import('@lobehub/icons-static-svg/icons/doc2x-color.svg'),
  docsearch: () => import('@lobehub/icons-static-svg/icons/docsearch-color.svg'),
  dolphin: () => import('@lobehub/icons-static-svg/icons/dolphin-text.svg'),
  doubao: () => import('@lobehub/icons-static-svg/icons/doubao-color.svg'),
  dreammachine: () => import('@lobehub/icons-static-svg/icons/dreammachine-text.svg'),
  elevenlabs: () => import('@lobehub/icons-static-svg/icons/elevenlabs-text.svg'),
  elevenx: () => import('@lobehub/icons-static-svg/icons/elevenx-text.svg'),
  essentialai: () => import('@lobehub/icons-static-svg/icons/essentialai-color.svg'),
  exa: () => import('@lobehub/icons-static-svg/icons/exa-color.svg'),
  fal: () => import('@lobehub/icons-static-svg/icons/fal-color.svg'),
  fastgpt: () => import('@lobehub/icons-static-svg/icons/fastgpt-color.svg'),
  featherless: () => import('@lobehub/icons-static-svg/icons/featherless-color.svg'),
  figma: () => import('@lobehub/icons-static-svg/icons/figma-color.svg'),
  fireworks: () => import('@lobehub/icons-static-svg/icons/fireworks-color.svg'),
  fishaudio: () => import('@lobehub/icons-static-svg/icons/fishaudio-text.svg'),
  flora: () => import('@lobehub/icons-static-svg/icons/flora-text.svg'),
  flowith: () => import('@lobehub/icons-static-svg/icons/flowith-text.svg'),
  flux: () => import('@lobehub/icons-static-svg/icons/flux-text.svg'),
  friendli: () => import('@lobehub/icons-static-svg/icons/friendli-text.svg'),
  gemini: () => import('@lobehub/icons-static-svg/icons/gemini-color.svg'),
  geminicli: () => import('@lobehub/icons-static-svg/icons/geminicli-color.svg'),
  gemma: () => import('@lobehub/icons-static-svg/icons/gemma-color.svg'),
  giteeai: () => import('@lobehub/icons-static-svg/icons/giteeai-text.svg'),
  github: () => import('@lobehub/icons-static-svg/icons/github-text.svg'),
  githubcopilot: () => import('@lobehub/icons-static-svg/icons/githubcopilot-text.svg'),
  glama: () => import('@lobehub/icons-static-svg/icons/glama-text.svg'),
  glif: () => import('@lobehub/icons-static-svg/icons/glif-text.svg'),
  glmv: () => import('@lobehub/icons-static-svg/icons/glmv-color.svg'),
  google: () => import('@lobehub/icons-static-svg/icons/google-color.svg'),
  googlecloud: () => import('@lobehub/icons-static-svg/icons/googlecloud-brand-color.svg'),
  goose: () => import('@lobehub/icons-static-svg/icons/goose-text.svg'),
  gradio: () => import('@lobehub/icons-static-svg/icons/gradio-color.svg'),
  greptile: () => import('@lobehub/icons-static-svg/icons/greptile-color.svg'),
  grok: () => import('@lobehub/icons-static-svg/icons/grok-text.svg'),
  groq: () => import('@lobehub/icons-static-svg/icons/groq-text.svg'),
  hailuo: () => import('@lobehub/icons-static-svg/icons/hailuo-color.svg'),
  haiper: () => import('@lobehub/icons-static-svg/icons/haiper-text.svg'),
  hedra: () => import('@lobehub/icons-static-svg/icons/hedra-text.svg'),
  hermesagent: () => import('@lobehub/icons-static-svg/icons/hermesagent-text.svg'),
  higress: () => import('@lobehub/icons-static-svg/icons/higress-color.svg'),
  huawei: () => import('@lobehub/icons-static-svg/icons/huawei-color.svg'),
  huaweicloud: () => import('@lobehub/icons-static-svg/icons/huaweicloud-color.svg'),
  huggingface: () => import('@lobehub/icons-static-svg/icons/huggingface-color.svg'),
  hunyuan: () => import('@lobehub/icons-static-svg/icons/hunyuan-color.svg'),
  hyperbolic: () => import('@lobehub/icons-static-svg/icons/hyperbolic-color.svg'),
  ibm: () => import('@lobehub/icons-static-svg/icons/ibm-text.svg'),
  ideogram: () => import('@lobehub/icons-static-svg/icons/ideogram-text.svg'),
  iflytekcloud: () => import('@lobehub/icons-static-svg/icons/iflytekcloud-color.svg'),
  inception: () => import('@lobehub/icons-static-svg/icons/inception-text.svg'),
  inference: () => import('@lobehub/icons-static-svg/icons/inference-text.svg'),
  infermatic: () => import('@lobehub/icons-static-svg/icons/infermatic-color.svg'),
  infinigence: () => import('@lobehub/icons-static-svg/icons/infinigence-color.svg'),
  inflection: () => import('@lobehub/icons-static-svg/icons/inflection-text.svg'),
  internlm: () => import('@lobehub/icons-static-svg/icons/internlm-color.svg'),
  jimeng: () => import('@lobehub/icons-static-svg/icons/jimeng-color.svg'),
  jina: () => import('@lobehub/icons-static-svg/icons/jina-text.svg'),
  junie: () => import('@lobehub/icons-static-svg/icons/junie-color.svg'),
  kilocode: () => import('@lobehub/icons-static-svg/icons/kilocode-text.svg'),
  kimi: () => import('@lobehub/icons-static-svg/icons/kimi-color.svg'),
  kiro: () => import('@lobehub/icons-static-svg/icons/kiro-color.svg'),
  kling: () => import('@lobehub/icons-static-svg/icons/kling-color.svg'),
  kluster: () => import('@lobehub/icons-static-svg/icons/kluster-color.svg'),
  kolors: () => import('@lobehub/icons-static-svg/icons/kolors-color.svg'),
  krea: () => import('@lobehub/icons-static-svg/icons/krea-text.svg'),
  kwaikat: () => import('@lobehub/icons-static-svg/icons/kwaikat-text-color.svg'),
  kwaipilot: () => import('@lobehub/icons-static-svg/icons/kwaipilot-color.svg'),
  lambda: () => import('@lobehub/icons-static-svg/icons/lambda-text.svg'),
  langchain: () => import('@lobehub/icons-static-svg/icons/langchain-color.svg'),
  langfuse: () => import('@lobehub/icons-static-svg/icons/langfuse-color.svg'),
  langgraph: () => import('@lobehub/icons-static-svg/icons/langgraph-color.svg'),
  langsmith: () => import('@lobehub/icons-static-svg/icons/langsmith-color.svg'),
  leptonai: () => import('@lobehub/icons-static-svg/icons/leptonai-color.svg'),
  lg: () => import('@lobehub/icons-static-svg/icons/lg-color.svg'),
  llamava: () => import('@lobehub/icons-static-svg/icons/llava-color.svg'),
  llama: () => import('@lobehub/icons-static-svg/icons/llava-color.svg'),
  lmstudio: () => import('@lobehub/icons-static-svg/icons/lmstudio.svg'),
  lobehub: () => import('@lobehub/icons-static-svg/icons/lobehub-color.svg'),
  longcat: () => import('@lobehub/icons-static-svg/icons/longcat-text.svg'),
  lovable: () => import('@lobehub/icons-static-svg/icons/lovable-text.svg'),
  lovart: () => import('@lobehub/icons-static-svg/icons/lovart-text.svg'),
  luma: () => import('@lobehub/icons-static-svg/icons/luma-text.svg'),
  mcp: () => import('@lobehub/icons-static-svg/icons/mcp.svg'),
  magic: () => import('@lobehub/icons-static-svg/icons/magic-text.svg'),
  make: () => import('@lobehub/icons-static-svg/icons/make-color.svg'),
  manus: () => import('@lobehub/icons-static-svg/icons/manus-text.svg'),
  mastra: () => import('@lobehub/icons-static-svg/icons/mastra-text.svg'),
  mcpeso: () => import('@lobehub/icons-static-svg/icons/mcpso-color.svg'),
  menlo: () => import('@lobehub/icons-static-svg/icons/menlo-color.svg'),
  meshy: () => import('@lobehub/icons-static-svg/icons/meshy-color.svg'),
  meta: () => import('@lobehub/icons-static-svg/icons/meta-color.svg'),
  metaai: () => import('@lobehub/icons-static-svg/icons/metaai-color.svg'),
  metagpt: () => import('@lobehub/icons-static-svg/icons/metagpt-text.svg'),
  microsoft: () => import('@lobehub/icons-static-svg/icons/microsoft-color.svg'),
  midjourney: () => import('@lobehub/icons-static-svg/icons/midjourney-text.svg'),
  minimax: () => import('@lobehub/icons-static-svg/icons/minimax-color.svg'),
  mistral: () => import('@lobehub/icons-static-svg/icons/mistral-text.svg'),
  modelcontextprotocol: () => import('@lobehub/icons-static-svg/icons/mcp.svg'),
  modelscope: () => import('@lobehub/icons-static-svg/icons/modelscope-color.svg'),
  monica: () => import('@lobehub/icons-static-svg/icons/monica-color.svg'),
  moonshot: () => import('@lobehub/icons-static-svg/icons/moonshot-text.svg'),
  morph: () => import('@lobehub/icons-static-svg/icons/morph-text.svg'),
  moxt: () => import('@lobehub/icons-static-svg/icons/moxt-color.svg'),
  myshell: () => import('@lobehub/icons-static-svg/icons/myshell-text.svg'),
  n8n: () => import('@lobehub/icons-static-svg/icons/n8n-color.svg'),
  nebius: () => import('@lobehub/icons-static-svg/icons/nebius.svg'),
  newapi: () => import('@lobehub/icons-static-svg/icons/newapi-color.svg'),
  notebooklm: () => import('@lobehub/icons-static-svg/icons/notebooklm-text.svg'),
  nousresearch: () => import('@lobehub/icons-static-svg/icons/nousresearch-text.svg'),
  novelai: () => import('@lobehub/icons-static-svg/icons/novelai-text.svg'),
  novitaai: () => import('@lobehub/icons-static-svg/icons/novita-color.svg'),
  nvidia: () => import('@lobehub/icons-static-svg/icons/nvidia-color.svg'),
  obsidian: () => import('@lobehub/icons-static-svg/icons/obsidian-text.svg'),
  ollama: () => import('@lobehub/icons-static-svg/icons/ollama-text.svg'),
  openai: () => import('@lobehub/icons-static-svg/icons/openai.svg'),
  openchat: () => import('@lobehub/icons-static-svg/icons/openchat-color.svg'),
  openclaw: () => import('@lobehub/icons-static-svg/icons/openclaw-color.svg'),
  opencode: () => import('@lobehub/icons-static-svg/icons/opencode-text.svg'),
  openhands: () => import('@lobehub/icons-static-svg/icons/openhands-text.svg'),
  openhuman: () => import('@lobehub/icons-static-svg/icons/openhuman-text.svg'),
  openrouter: () => import('@lobehub/icons-static-svg/icons/openrouter.svg'),
  openwebui: () => import('@lobehub/icons-static-svg/icons/openwebui-text.svg'),
  pa: () => import('@lobehub/icons-static-svg/icons/palm-text.svg'),
  palm: () => import('@lobehub/icons-static-svg/icons/palm-text.svg'),
  perplexity: () => import('@lobehub/icons-static-svg/icons/perplexity-color.svg'),
  phidata: () => import('@lobehub/icons-static-svg/icons/phidata-color.svg'),
  phind: () => import('@lobehub/icons-static-svg/icons/phind-text.svg'),
  pika: () => import('@lobehub/icons-static-svg/icons/pika-text.svg'),
  pixverse: () => import('@lobehub/icons-static-svg/icons/pixverse-text.svg'),
  player2: () => import('@lobehub/icons-static-svg/icons/player2-text.svg'),
  poe: () => import('@lobehub/icons-static-svg/icons/poe-color.svg'),
  pollinations: () => import('@lobehub/icons-static-svg/icons/pollinations-text.svg'),
  prunaai: () => import('@lobehub/icons-static-svg/icons/prunaai-color.svg'),
  pydanticai: () => import('@lobehub/icons-static-svg/icons/pydanticai-color.svg'),
  qingyan: () => import('@lobehub/icons-static-svg/icons/qingyan-color.svg'),
  qiniu: () => import('@lobehub/icons-static-svg/icons/qiniu-color.svg'),
  qoder: () => import('@lobehub/icons-static-svg/icons/qoder-color.svg'),
  qwen: () => import('@lobehub/icons-static-svg/icons/qwen-color.svg'),
  replicate: () => import('@lobehub/icons-static-svg/icons/replicate.svg'),
  replit: () => import('@lobehub/icons-static-svg/icons/replit-color.svg'),
  reve: () => import('@lobehub/icons-static-svg/icons/reve-text.svg'),
  rwkv: () => import('@lobehub/icons-static-svg/icons/rwkv-text.svg'),
  sambanova: () => import('@lobehub/icons-static-svg/icons/sambanova.svg'),
  siloconcloud: () => import('@lobehub/icons-static-svg/icons/siliconcloud-color.svg'),
  silocon: () => import('@lobehub/icons-static-svg/icons/siliconcloud-color.svg'),
  sillytavern: () => import('@lobehub/icons-static-svg/icons/sillytavern-text.svg'),
  skywork: () => import('@lobehub/icons-static-svg/icons/skywork-text.svg'),
  slock: () => import('@lobehub/icons-static-svg/icons/slock.svg'),
  smithery: () => import('@lobehub/icons-static-svg/icons/smithery-color.svg'),
  snowflake: () => import('@lobehub/icons-static-svg/icons/snowflake-color.svg'),
  sophnet: () => import('@lobehub/icons-static-svg/icons/sophnet-color.svg'),
  sora: () => import('@lobehub/icons-static-svg/icons/sora-color.svg'),
  spark: () => import('@lobehub/icons-static-svg/icons/spark-color.svg'),
  speedai: () => import('@lobehub/icons-static-svg/icons/speedai-color.svg'),
  stability: () => import('@lobehub/icons-static-svg/icons/stability-text.svg'),
  statecloud: () => import('@lobehub/icons-static-svg/icons/statecloud-color.svg'),
  stepfun: () => import('@lobehub/icons-static-svg/icons/stepfun-color.svg'),
  straico: () => import('@lobehub/icons-static-svg/icons/straico-color.svg'),
  streamlake: () => import('@lobehub/icons-static-svg/icons/streamlake-color.svg'),
  suno: () => import('@lobehub/icons-static-svg/icons/suno-text.svg'),
  synic: () => import('@lobehub/icons-static-svg/icons/sync.svg'),
  tencent: () => import('@lobehub/icons-static-svg/icons/tencent-color.svg'),
  tencentcloud: () => import('@lobehub/icons-static-svg/icons/tencentcloud-color.svg'),
  tiangong: () => import('@lobehub/icons-static-svg/icons/tiangong-color.svg'),
  togetherai: () => import('@lobehub/icons-static-svg/icons/together-color.svg'),
  topazlabs: () => import('@lobehub/icons-static-svg/icons/topazlabs-text.svg'),
  tra: () => import('@lobehub/icons-static-svg/icons/trae-color.svg'),
  traee: () => import('@lobehub/icons-static-svg/icons/trae-text.svg'),
  tripo: () => import('@lobehub/icons-static-svg/icons/tripo-text.svg'),
  turix: () => import('@lobehub/icons-static-svg/icons/turix-text.svg'),
  udio: () => import('@lobehub/icons-static-svg/icons/udio-color.svg'),
  unstructured: () => import('@lobehub/icons-static-svg/icons/unstructured-color.svg'),
  upstage: () => import('@lobehub/icons-static-svg/icons/upstage-color.svg'),
  v0: () => import('@lobehub/icons-static-svg/icons/v0.svg'),
  vectorizerai: () => import('@lobehub/icons-static-svg/icons/vectorizerai-text.svg'),
  venice: () => import('@lobehub/icons-static-svg/icons/venice-color.svg'),
  vercel: () => import('@lobehub/icons-static-svg/icons/vercel.svg'),
  vertexai: () => import('@lobehub/icons-static-svg/icons/vertexai-color.svg'),
  vidu: () => import('@lobehub/icons-static-svg/icons/vidu-color.svg'),
  viggle: () => import('@lobehub/icons-static-svg/icons/viggle-text.svg'),
  vllm: () => import('@lobehub/icons-static-svg/icons/vllm-text.svg'),
  volcengine: () => import('@lobehub/icons-static-svg/icons/volcengine-text.svg'),
  voyage: () => import('@lobehub/icons-static-svg/icons/voyage-text.svg'),
  wenxin: () => import('@lobehub/icons-static-svg/icons/wenxin-color.svg'),
  winds: () => import('@lobehub/icons-static-svg/icons/windsurf-text.svg'),
  workersai: () => import('@lobehub/icons-static-svg/icons/workersai-color.svg'),
  xai: () => import('@lobehub/icons-static-svg/icons/xai-text.svg'),
  xuanyuan: () => import('@lobehub/icons-static-svg/icons/xuanyuan-color.svg'),
  yandex: () => import('@lobehub/icons-static-svg/icons/yandex.svg'),
  yi: () => import('@lobehub/icons-static-svg/icons/yi-text.svg'),
  youmind: () => import('@lobehub/icons-static-svg/icons/youmind-text.svg'),
  yuanbao: () => import('@lobehub/icons-static-svg/icons/yuanbao-text.svg'),
  zai: () => import('@lobehub/icons-static-svg/icons/zai-text.svg'),
  zapier: () => import('@lobehub/icons-static-svg/icons/zapier-color.svg'),
  zeabur: () => import('@lobehub/icons-static-svg/icons/zeabur-color.svg'),
  zenmux: () => import('@lobehub/icons-static-svg/icons/zenmux-text.svg'),
  zencoder: () => import('@lobehub/icons-static-svg/icons/zencoder-color.svg'),
  zerooneai: () => import('@lobehub/icons-static-svg/icons/zeroone-color.svg'),
  zhipu: () => import('@lobehub/icons-static-svg/icons/zhipu-color.svg'),
}

async function loadSvg() {
  if (!props.name) {
    svgSrc.value = ''
    return
  }
  const key = normalize(props.name)
  const loader = svgSrcMap[key]
  if (loader) {
    try {
      const mod = await loader()
      svgSrc.value = mod.default || mod
    } catch {
      svgSrc.value = ''
    }
  } else {
    svgSrc.value = ''
  }
}

watch(() => props.name, loadSvg, { immediate: true })

const firstChar = computed(() => (props.name || '').charAt(0).toUpperCase())

const wrapperStyle = computed(() => ({
  width: `${props.size}px`,
  height: `${props.size}px`
}))

const fallbackStyle = computed(() => ({
  width: `${props.size}px`,
  height: `${props.size}px`,
  fontSize: `${Math.round(props.size * 0.45)}px`
}))
</script>

<style scoped lang="scss">
.lobe-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  .lobe-icon__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .lobe-icon__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-weight: 600;
    font-family: 'Arial', sans-serif;
    user-select: none;
    flex-shrink: 0;
  }
}
</style>