OpenClaw Provider Icons 资源治理与许可署名指南:从 ATTRIBUTION.md 到 Control UI 图标渲染链路
【免费下载链接】openclawThe AI that really does things. Any OS. Any Platform. The lobster way. 🦞项目地址: https://gitcode.com/GitHub_Trending/cl/openclaw
本文以 ui/public/provider-icons/ATTRIBUTION.md 为基准,完整梳理 OpenClaw 控制界面(Control UI)中 80 个模型厂商品牌图标的来源、清洗规则与许可证署名要求,并结合 provider-icon 组件、公共资源路径工具 与 根资源清单 的源码实现,说明这些 SVG 从仓库静态文件到浏览器渲染的完整链路。读完本文,你可以准确回答三类问题:这批图标各自来自哪里、为什么可以放心复用;OpenClaw 在分发前对 SVG 做了哪些标准化处理;新增一个厂商图标时需要遵守哪些署名与合规约束。
图标目录总体格局:80 个 SVG 与四组来源
ui/public/provider-icons/ 目录当前包含 80 个形如ProviderIcon-<name>.svg的文件(从ProviderIcon-abacus.svg到ProviderIcon-zed.svg),以及一份署名文档 ATTRIBUTION.md。署名文档将其中绝大多数图标按上游来源划分为四组:
- CodexBar 批次(52 个文件):文档明确写道 “52 of the
ProviderIcon-*.svgfiles in this directory were copied one-for-one fromSources/CodexBar/Resources/ProviderIcon-*.svgin CodexBar commit215efbd39ad58acb4b0cd637c407d63e6183bc8d”。这批图标与上游文件逐一对应,几何与视觉内容保持一致,上游许可证为 MIT(Copyright (c) 2026 Peter Steinberger)。 - 三个单点品牌图标:Pi、LM Studio、LongCat,各自单独记录来源与清洗方式(见下文)。
- llama.cpp 图标:来自官方 llama.cpp 仓库的
media/llama1-icon-transparent.svg(上游 MIT License,Copyright (c) 2023-2026 The ggml authors)。 - Lobe Icons 批次(24 个文件):来自 npm 包
@lobehub/icons-static-svg1.94.0(MIT,Copyright (c) 2023 LobeHub)中的单色 SVG,文档给出了逐文件的上游图标名映射表。
80 个文件减去上述 52 + 3 + 1 + 24 = 80,恰好与目录实际文件数吻合——这说明署名文档与目录内容是一一对应的,没有任何“无主”图标。
CodexBar 批次
- 来源 commit:
215efbd39ad58acb4b0cd637c407d63e6183bc8d; - 来源目录:
Sources/CodexBar/Resources; - 上游许可:MIT(文档末尾完整收录了 CodexBar 的 MIT License 文本,Copyright (c) 2026 Peter Steinberger)。
Pi 图标
ProviderIcon-pi.svg是官方 Pi logo(https://pi.dev/logo.svg)的元数据清洗副本,官方 press kit 见https://pi.dev/press-kit。
LM Studio 图标
ProviderIcon-lmstudio.svg是 LM Studio 官方发布的单色轮廓图标(lm-studio-icon-outline-white.svg),品牌规范见https://lmstudio.ai/brand。
LongCat 图标
ProviderIcon-longcat.svg是 LongCat 团队(美团)官方品牌标的元数据清洗副本,用于 LongCat API 平台的 favicon 与文档品牌。文档特别记录了两处改造:白色背景底板被移除,内部字形重新着色为currentColor,使该图标在浅色与深色主题下都能正确渲染,几何形状与来源保持一致。这一“重着色”改造在仓库中可以得到验证:ProviderIcon-longcat.svg 内部确实用到了currentColor填充,而同一目录下的其他图标(如 ProviderIcon-llamacpp.svg)仍保留白色fill="white"——后者依赖渲染容器提供深色背景,这正是两者处理策略不同的体现。
llama.cpp 图标
ProviderIcon-llamacpp.svg取自官方 llama.cpp 仓库 commit2cfef4d117d67ab1dec002915b48a15d11ee1973中的media/llama1-icon-transparent.svg,上游许可证为 MIT(文档完整收录了该 MIT 文本)。
Lobe Icons 批次:24 个文件的完整映射
文档以表格形式逐一列出 Lobe Icons 批次中每个文件对应的上游图标名,这是合规审查时最有价值的部分(其中byteplus映射自bytedance.svg、qianfan映射自baiducloud.svg,属于“子品牌映射到母品牌图标”的情形):
| 文件 | 上游图标 |
|---|---|
ProviderIcon-arcee.svg | arcee.svg |
ProviderIcon-baseten.svg | baseten.svg |
ProviderIcon-byteplus.svg | bytedance.svg(BytePlus 是字节的enterprise品牌) |
ProviderIcon-cerebras.svg | cerebras.svg |
ProviderIcon-cloudflare.svg | cloudflare.svg |
ProviderIcon-cohere.svg | cohere.svg |
ProviderIcon-comfy.svg | comfyui.svg |
ProviderIcon-deepinfra.svg | deepinfra.svg |
ProviderIcon-fal.svg | fal.svg |
ProviderIcon-featherless.svg | featherless.svg |
ProviderIcon-fireworks.svg | fireworks.svg |
ProviderIcon-huggingface.svg | huggingface.svg |
ProviderIcon-meta.svg | meta.svg |
ProviderIcon-microsoft.svg | microsoft.svg |
ProviderIcon-novita.svg | novita.svg |
ProviderIcon-nvidia.svg | nvidia.svg |
ProviderIcon-pixverse.svg | pixverse.svg |
ProviderIcon-qianfan.svg | baiducloud.svg(千帆是百度云的模型平台) |
ProviderIcon-runway.svg | runway.svg |
ProviderIcon-tencent.svg | tencent.svg |
ProviderIcon-together.svg | together.svg |
ProviderIcon-vercel.svg | vercel.svg |
ProviderIcon-vllm.svg | vllm.svg |
ProviderIcon-volcengine.svg | volcengine.svg |
上游包为@lobehub/icons-static-svg(MIT,Copyright (c) 2023 LobeHub),文档同样完整收录了对应的 MIT 许可文本。
“元数据清洗”原则:分发前对 SVG 做了哪些标准化
署名文档反复使用 “metadata-cleaned copy” 这一表述,并给出明确定义:
- CodexBar 批次:“OpenClaw removes XML declarations, external DTD declarations, and generator metadata before serving the files as public assets. The SVG geometry and visual content otherwise match the cited upstream files.”——即只移除 XML 声明(
<?xml ...?>)、外部 DTD 声明和生成器元数据(如编辑器注释),SVG 几何与视觉内容保持不变; - Lobe Icons 批次:“XML declarations and
<title>elements removed; geometry unchanged”——额外移除了<title>元素,几何不变。
这条规则可以在当前仓库中直接验证:对 ui/public/provider-icons/ 下全部 80 个 SVG 检查,没有任何文件包含<?xml声明,也没有任何文件包含<!DOCTYPE或外部 DTD 实体声明——清洗规则与署名文档的描述完全一致。这一做法的工程价值在于:
- 消除外部引用:移除外部 DTD 可避免 SVG 加载时发起意外的网络请求(外部实体是已知的一类安全与性能隐患);
- 体积与一致性:去掉生成器元数据后文件更小,且同一批次内结构风格统一;
- 可审计性:因为“几何不变”,署名文档可以承诺这些文件与引用上游文件一一对应,第三方审计者可以逐文件比对验证。
同时,文档还有一句重要的合规声明:“Provider names and marks remain the property of their respective owners.”——厂商名称与商标仍归其各自所有者所有。也就是说,MIT 许可覆盖的是图形文件本身,不代表 OpenClaw 获得了任何厂商商标的使用权;在品牌图标的使用场景上应遵循各厂商的品牌规范(如 LM Studio 的https://lmstudio.ai/brand)。
从静态文件到 UI 渲染:provider-icon 组件的实现
图标资产只是链路的一半。ui/src/components/provider-icon.ts 文件头注释说明了它的职责:“Shared model-provider brand icon resolution and rendering for surfaces that show provider rows (chat model picker, model providers settings page)”,即聊天模型选择器与“模型提供商”设置页中展示厂商行的公共组件。其解析逻辑分为三层:
1. 图标名白名单
组件维护了一个 80 项的PROVIDER_ICON_NAMES集合(abacus、alibaba、…、zed),与 ui/public/provider-icons/ 目录中的 SVG 文件名严格一一对应。解析函数resolveProviderIconName的逻辑是:先把 provider id 归一化为小写,查别名表,再查白名单——任何一步失败都返回null:
function resolveProviderIconName(provider: string): string | null { const normalized = provider.trim().toLowerCase(); const icon = PROVIDER_ICON_ALIASES[normalized] ?? normalized; return PROVIDER_ICON_NAMES.has(icon) ? icon : null; }2. 厂商 id 到图标名的别名映射
由于很多模型目录里的 provider id 与品牌标的 slug 不同名,组件内置了PROVIDER_ICON_ALIASES映射,例如:
const PROVIDER_ICON_ALIASES: Readonly<Record<string, string>> = { anthropic: "claude", "amazon-bedrock": "bedrock", google: "gemini", "github-copilot": "copilot", "llama-cpp": "llamacpp", openai: "codex", // CodexBar names its bundled OpenAI knot asset "codex". qwen: "alibaba", xai: "grok", xiaomi: "mimo", // Xiaomi ships its AI models under the MiMo brand mark. "vertex-ai": "vertexai", // ... };这里的注释与署名文档相互印证:openai映射到codex图标,是因为 CodexBar 将其内置的 OpenAI knot 资产命名为codex——正是 ATTRIBUTION.md 中所述 CodexBar 批次的一部分。此外组件还提供providerDisplayLabel处理显示名(如llama-cpp→ “llama.cpp”、zai→ “Z.AI”),无品牌显示名时由formatRawProviderLabel生成 Title-case 回退标签。
3. 渲染与回退
renderProviderBrandIcon为解析成功的 provider 输出一个内联样式指向 SVG 资产的<span>,并附加data-provider-icon属性供样式系统使用:
return html` <span class="provider-brand-icon${surfaceClass}" >type ControlUiPublicAsset = | ControlUiRootPublicAsset | `fonts/${string}.css` | `themes/${string}.css` | `provider-icons/ProviderIcon-${string}.svg` | `file-icons/${string}.svg` | `app-art/${string}.webp` | `community-art/${string}.webp`;controlUiPublicAssetPath会在资源 URL 后附加构建版本号(读取<html>上的data-openclaw-control-ui-build-id属性,拼成?v=<buildId>),从而实现“内容绑定”的缓存失效:图标 SVG 一旦随构建更新,浏览器即拉取新版本。这个 build-id 机制由 src/gateway/control-ui-root-assets.ts 定义,其中isControlUiVersionedPublicAsset的正则同样把(provider-icons|file-icons...)/...svg列为受版本化缓存管辖的资产——从源码结构看,网关侧对控制 UI 静态资源的校验、UI 侧的路径推断共享同一份资产清单,保证“服务端认可的静态文件”与“前端会请求的静态文件”两侧不漂移。
合规清单:新增厂商图标时应做什么
结合署名文档与上述实现,向该目录新增一个ProviderIcon-<name>.svg需要同时满足三条约束,这也是署名文档存在的直接意义:
- 来源可署名:图标要么来自 MIT 等宽松许可的上游(需在 ATTRIBUTION.md 中记录来源 commit/包版本与上游许可文件路径,如同 CodexBar 批次记录 commit hash、Lobe 批次记录包名与版本
1.94.0),要么是厂商官方发布的品牌资产(需记录官方下载源,如 Pi、LM Studio),且厂商名称与商标仍归所有者所有; - 元数据清洗到位:移除 XML 声明、外部 DTD 声明、生成器元数据(以及 Lobe 批次所示范的
<title>元素),保持几何不变;如需适配明暗双主题,参照 LongCat 的做法将内部字形改为currentColor; - 接入解析链路:在 provider-icon.ts 的
PROVIDER_ICON_NAMES白名单中加入新 slug;若 provider id 与 slug 不同名,在PROVIDER_ICON_ALIASES中补充映射;需要特定品牌显示名时在PROVIDER_DISPLAY_LABELS中登记。完成这三步后,renderProviderBrandIcon与带版本号的 public asset 分发链路即可自动覆盖新图标。
最后要再次强调署名文档中的一句总括性事实:所有 52 个 CodexBar 来源图标、24 个 Lobe Icons 图标以及 llama.cpp 图标均以 MIT 许可文本随 ATTRIBUTION.md 一并保留在仓库中,而 Pi、LM Studio、LongCat 三个图标则依赖“官方发布 + 清洗不改几何”的来源记录。任何后续变更图标目录的行为,都应保持这份“文件—来源—许可”三方对应关系不丢失,这正是该署名文档的核心价值所在。
【免费下载链接】openclawThe AI that really does things. Any OS. Any Platform. The lobster way. 🦞项目地址: https://gitcode.com/GitHub_Trending/cl/openclaw
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考