工单上写得很简单：把集成品牌的图标加到设置页。十二个品牌，能有多难。装上一套大家默认都会用的单色图标库，渲染出网格，截图发给设计师。四分钟后回复来了：为什么全是灰的？
不是纯灰。每个图标都是单一颜色，Slack、Google、Figma 看起来像自己的剪影。单路径图标集只能做到这一步，它没法呈现一个品牌真正的标志。
这就是 thesvg 想解决的问题。它提供 7600 多个品牌的全彩标志，带单色、浅色、深色和文字标（wordmark）多种变体，可以以 React 组件、CDN 链接或命令行工具的形式接入。下面所有内容都用它，每条说法都可以核对。
单色图标为什么撑不住品牌墙
单路径图标体积小，还能用 CSS 改色。可一旦一个标志需要不止一种颜色才能被认出来，它就崩了。Google、Slack、微软、Chrome 都是明显的例子。渐变是另一种情况，而渐变在当下的标志改版里到处都是。单色方案还给不了文字标——一个符号配一个名字在工具栏里够用，但合作方页面通常想要那个横向的完整标志。
别只听我说覆盖够不够。把你路线图上的十个品牌列出来，不是今天设计稿里的那些，丢进注册表跑一遍。下面这段脚本会报告哪些存在、各自有哪些变体。它直接读取 CDN 上的公开 JSON，不需要安装任何东西。
- 注册表地址指向 jsDelivr 上的 icons.json
- 把想查的品牌 slug 放进数组
- 逐个匹配，打印 found 或 missing，以及可用变体
用你自己的清单跑一遍，一分钟的事。
在 React 里接入全彩标志
从 thesvg 安装 React 包，然后按需单独引入用到的图标，这样打包工具只会保留这几个。
导出名跟随每个品牌的 slug，具体拼写要查包的 README。如果只是几个图标、不想装任何东西，CDN 每个 URL 提供一个 SVG，是最快的试用方式。
生产环境记得锁定发布标签，而不是用 main 分支，免得上游一改动，你页面上的标志就跟着变了。
深色模式不用重写一遍
常见的翻车是：黑色标志放在近黑色的卡片上。有了变体文件，修法就是按主题挑文件，而不是去改颜色。
用 next-themes 读取当前主题，深色时取 dark 变体，否则取 default。这里有两个坑：不是每个品牌都提供深色变体，所以要检查图标页面，或者在 404 时回退到 default.svg；另外首次绘制会先用默认主题，除非你在服务端读取，否则可能出现一帧闪烁。
如果不需要运行时切换，把标志放在两种主题下都是中性浅色的卡片上就行。大多数合作方页面本来就是这么做的。
文字标和那个横向标志的难题
纯符号库做不到的另一件事是横向标志。合作方页面上一行排六个名字，用文字标比用六个方块读起来舒服得多，两种混着用则像是出了错。
有了变体文件，就可以按布局来选，用的还是深色模式那个辅助函数。紧凑工具栏取 default.svg，合作方横条取 wordmark.svg，主题版本则用 wordmark-dark.svg 和 wordmark-light.svg。
不是每个品牌都有文字标。在一条横条里，缺文字标比缺标志更难看，所以我会回退成符号加旁边的品牌名。
几个常被问到的问题
有没有带全彩标志的单色图标库替代品？有，就是 thesvg，它为 7600 多个品牌提供全彩标志，带彩色、单色、浅色、深色和文字标变体。
单色图标库支持深色模式吗？它的图标是单路径的，靠 CSS 改色，没有单独的深色图稿。这对剪影有效，对多色标志无效。
全彩品牌 SVG 能商用吗？文件许可允许，但商标规则依然适用。展示一个标志来说明你集成了某个产品，通常没问题；暗示一段你并不存在的合作关系，就不行。
怎么拿到冷门开发工具的图标？跑一遍上面那段覆盖脚本。如果某个品牌缺失，thesvg 有一个提交页面。
回到那张截图。问题从来不是十二个品牌有多难，而是选错了图标库。
热门跟贴