如何优雅地获取和使用各大 AI 模型的官方高清图标（Hexo 完美兼容指南）

随着 DeepSeek、ChatGPT、Claude、Gemini、Kimi 等大模型的爆火，我们在写技术博客、做 AI 项目主页或工具箱页面时，经常会想用一套「清晰、统一、可持续更新」的品牌图标。

本文给出一份更严谨、Hexo 友好的方案：优先用 Lobe Icons（@lobehub/icons） 这套开源图标集提供的静态资源（SVG/PNG/WebP），要么直接走 CDN（免安装），要么下载到 source/img/ 本地托管（更稳定、也更符合性能优先）。

---

先说清楚：什么叫“官方”？

Lobe Icons 的定位是“AI/LLM 品牌图标集合”，图标来源会尽量对齐各品牌的官方视觉，但它 并不等于品牌方官方授权/官方发布。更准确的说法是：

• 这套库能帮你 快速拿到高质量、可用的品牌图标（适合博客/文档/非商业 UI 展示）。
• 图标（Logo）本身通常属于各公司商标/品牌资产，使用时不要用于冒充官方、抢注商标或误导性宣传。

---

💡 知识点总结（这篇文章会讲什么）

1. 彩色优先用 PNG：想要“所有图标都是彩色”的统一视觉，优先用 PNG 的 *-color 变体（兼容性最好）。
2. SVG 适合清晰与轻量：SVG 更清晰、体积小，但很多品牌在 SVG 包里只有“单色版”。
3. 免安装 CDN 引用：通过 @lobehub/icons-static-* 的静态包，直接拼 URL 使用。
4. 本地托管更稳：把用到的图标下载到 source/img/，避免外链波动/被墙/限速。
5. “图标名（ICON SLUG）”是关键：找不到就去图标库页面搜索，确定 slug 后再拼 CDN。

---

🚀 在 Hexo 博客中使用的两种方式

方案一：免安装，直接用 CDN（最省事）

Lobe Icons 提供了静态资源包，支持 unpkg 和 npmmirror（阿里 npm 镜像） 两种方式。

1) SVG（清晰/轻量，但不一定是彩色）

通用拼接规则（把 [ICON SLUG] 换成图标名，全小写，常见如 openai、claude、deepseek）：

# unpkg
https://unpkg.com/@lobehub/icons-static-svg@latest/icons/[ICON SLUG].svg

# npmmirror（国内更稳）
https://registry.npmmirror.com/@lobehub/icons-static-svg/latest/files/icons/[ICON SLUG].svg

可直接用的示例（SVG 包里很多图标是单色；如果你需要“彩色统一”，看下一节 PNG *-color 的写法）：

• OpenAI：https://registry.npmmirror.com/@lobehub/icons-static-svg/latest/files/icons/openai.svg
• Claude：https://registry.npmmirror.com/@lobehub/icons-static-svg/latest/files/icons/claude.svg

在 Hexo Markdown 里直接贴（Hexo 支持 Markdown 里写 HTML）：

<p>
  <img src="https://registry.npmmirror.com/@lobehub/icons-static-svg/latest/files/icons/openai.svg" width="28" height="28" alt="OpenAI" />
  <img src="https://registry.npmmirror.com/@lobehub/icons-static-svg/latest/files/icons/claude.svg" width="28" height="28" alt="Claude" />
</p>

2) PNG（推荐：彩色统一 + 深色/浅色可切换）

PNG 静态包天然区分 light/ 与 dark/，并提供大量 *-color.png（彩色版）。推荐用 <picture> 做深色模式自动切换：

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/dark/claude-color.png"
  />
  <img
    width="28"
    height="28"
    src="https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/claude-color.png"
    alt="Claude"
  />
</picture>

3) 进一步封装（推荐：全站统一写法）

如果你在文章/页面里会反复插入这些 AI 图标，建议封装成一个 Hexo tag，后续只要写 slug 就行（并自动做深色/浅色切换）。例如：

{% ai_icon claude 20 Claude %}
{% ai_icon gemini 20 Gemini %}
{% ai_icon deepseek 20 DeepSeek %}
{% ai_icon qwen 20 Qwen %}

说明：

• 默认输出彩色 PNG 的 *-color.png（light/dark 自动切换）
• OpenAI 会自动走“徽章底色 + 反白 openai.svg”的方案（因为 PNG 包里没有 openai-color.png）

一些常用彩色图标示例（PNG）：

• DeepSeek：https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/deepseek-color.png
• Claude：https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/claude-color.png
• Gemini：https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/gemini-color.png
• Qwen：https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/qwen-color.png
• Kimi：https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/kimi-color.png
• GLM：https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/chatglm-color.png
• 豆包：https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/doubao-color.png
• 文心：https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/wenxin-color.png

注意：OpenAI 在这套 PNG 静态包里没有 openai-color.png。如果你也想“视觉上保持彩色统一”，一个常见做法是给 OpenAI 单色标加一个品牌底色徽章（例如 ChatGPT App 的绿色）并把图形反白。

---

方案二：下载到本地（更稳定，适合长期维护）

如果你不想依赖外部 CDN，推荐把“实际用到的少量图标”下载到博客仓库里，让 Hexo 一起构建发布。

推荐目录（不污染主题目录，也不影响你后续升级主题）：

• source/img/brands/ai/（你也可以用自己的目录命名习惯）

例如下载一组“彩色 PNG”到本地：

mkdir -p source/img/brands/ai

curl -L "https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/deepseek-color.png" -o source/img/brands/ai/deepseek.png
curl -L "https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/claude-color.png" -o source/img/brands/ai/claude.png
curl -L "https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/gemini-color.png" -o source/img/brands/ai/gemini.png
curl -L "https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/qwen-color.png" -o source/img/brands/ai/qwen.png
curl -L "https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/kimi-color.png" -o source/img/brands/ai/kimi.png

然后在文章或页面里这样用：

<img src="/img/brands/ai/claude.png" width="28" height="28" alt="Claude" />

---

🧭 怎么找到正确的 ICON SLUG？

如果你不确定某个模型/厂商的图标名，最稳的方式是直接去图标库页面搜索：

• 打开图标列表：https://lobehub.com/icons
• 搜索并进入对应图标页，例如：
  • DeepSeek：https://lobehub.com/icons/deepseek
  • Kimi：https://lobehub.com/icons/kimi

页面 URL 的最后一段就是 slug（大多数情况可以直接用）。

---

🔗 相关资源

• 图标列表（搜索 slug）：https://lobehub.com/icons
• 组件文档（React/Variants）：https://icons.lobehub.com/
• GitHub 仓库（更新/贡献）：https://github.com/lobehub/lobe-icons
• 静态包（免安装 CDN 用）：@lobehub/icons-static-svg / @lobehub/icons-static-png / @lobehub/icons-static-webp