feat: provider icon component

packages/ui/src/components/provider-icon.css

@@ -0,0 +1,5 @@
+[data-component="provider-icon"] {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}

packages/ui/src/components/provider-icon.tsx

@@ -0,0 +1,24 @@
+import type { Component, JSX } from "solid-js"
+import { splitProps } from "solid-js"
+import sprite from "./provider-icons/sprite.svg"
+import type { IconName } from "./provider-icons/types"
+
+export type ProviderIconProps = JSX.SVGElementTags["svg"] & {
+  name: IconName
+}
+
+export const ProviderIcon: Component<ProviderIconProps> = (props) => {
+  const [local, rest] = splitProps(props, ["name", "class", "classList"])
+  return (
+    <svg
+      data-component="provider-icon"
+      {...rest}
+      classList={{
+        ...(local.classList ?? {}),
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <use href={`${sprite}#${local.name}`} />
+    </svg>
+  )
+}

packages/ui/src/components/provider-icons/types.ts

@@ -0,0 +1,76 @@
+// This file is generated by icon spritesheet generator
+
+export const iconNames = [
+  "zhipuai",
+  "zhipuai-coding-plan",
+  "zenmux",
+  "zai",
+  "zai-coding-plan",
+  "xai",
+  "wandb",
+  "vultr",
+  "vercel",
+  "venice",
+  "v0",
+  "upstage",
+  "togetherai",
+  "synthetic",
+  "submodel",
+  "siliconflow",
+  "scaleway",
+  "sap-ai-core",
+  "requesty",
+  "poe",
+  "perplexity",
+  "ovhcloud",
+  "openrouter",
+  "opencode",
+  "openai",
+  "ollama-cloud",
+  "nvidia",
+  "nebius",
+  "morph",
+  "moonshotai",
+  "moonshotai-cn",
+  "modelscope",
+  "mistral",
+  "minimax",
+  "minimax-cn",
+  "lucidquery",
+  "lmstudio",
+  "llama",
+  "kimi-for-coding",
+  "io-net",
+  "inference",
+  "inception",
+  "iflowcn",
+  "huggingface",
+  "helicone",
+  "groq",
+  "google",
+  "google-vertex",
+  "google-vertex-anthropic",
+  "github-models",
+  "github-copilot",
+  "fireworks-ai",
+  "fastrouter",
+  "deepseek",
+  "deepinfra",
+  "cortecs",
+  "cohere",
+  "cloudflare-workers-ai",
+  "cloudflare-ai-gateway",
+  "chutes",
+  "cerebras",
+  "baseten",
+  "bailing",
+  "azure",
+  "azure-cognitive-services",
+  "anthropic",
+  "amazon-bedrock",
+  "alibaba",
+  "alibaba-cn",
+  "aihubmix",
+] as const
+
+export type IconName = (typeof iconNames)[number]