# @clawnify/logokit 中文文档

规范地址：https://npmcn.com/package/%40clawnify/logokit/

版本：0\.3\.0
npm 元数据更新时间：2026-07-29T12:42:35.287Z
中文译文更新时间：2026-11-10T00:26:38.221Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40clawnify/logokit
原文对照：https://npmcn.com/package/%40clawnify/logokit/?lang=original
项目主页：https://github.com/clawnify/logokit#readme
源码仓库：https://github.com/clawnify/logokit

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：535 kB，45 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：0 个
- 首次发布：2026-07-29T12:32:23.208Z
- 最新版本发布：2026-07-29T12:42:34.932Z
- 近 30 天下载量：2792（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

品牌标志为SVG,有光栅回落为其他一切. 6,492个向量,离线分辨率,零依赖.

## 安装

```sh
npm install @clawnify/logokit
```

也可以使用：`pnpm add @clawnify/logokit`、`yarn add @clawnify/logokit`、`bun add @clawnify/logokit`

## README

# @ clawnify/ logokit (帮助)

标志为 **特别工作组**用光栅反射其他一切.

```bash
npm i @clawnify/logokit
```

```ts
import { logo } from "@clawnify/logokit";

logo("stripe.com");
// { url: "https://thesvg.org/icons/stripe/default.svg",
//   format: "svg", vector: true, source: "thesvg", slug: "stripe", verified: true }

logo("some-tiny-startup.io");
// { url: "https://t0.gstatic.com/faviconV2?...", 
//   format: "png", vector: false, source: "gstatic", size: 128, verified: false }
```

零从属. 没有 API 密钥 。 解析度已下线——品牌指数船与套装,所以没有来回转接,只是为了找出是否存在标志.

* * *

## 唯一该知道的事

**结果并不总是一个向量.** 6,492个品牌拥有真正的SVG. 其他一切都归根结底 只能让PNG返回.

这么说吧 `format` 属于合同的一部分,而不是装饰:

```ts
const hit = logo(input);
if (hit?.vector) {
  // safe to scale, recolor, inline
} else {
  // raster favicon — fine at small sizes, blurry if you scale it
}
```

如果一个光栅对你没用,就说吧 `null` 相反:

```ts
logo("some-tiny-startup.io", { format: "vector" }); // null
```

图书馆上面的纸 你16×16 PNG,让你发现生产中的模糊.

* * *

## API 密码

### `logo(input, options?) → Logo | null`

同步。 无为网. 这是你通常想要的.

接受你实际掌握的四种形状:

```ts
logo("stripe.com");              // domain
logo("https://stripe.com/docs"); // URL
logo("ceo@stripe.com");          // email — the company domain is in there
logo("Stripe");                  // brand name
```

子域和 `www.` 被剥去,所以 `docs.stripe.com` 决断像 `stripe.com`。 。 。 .

| 选项 | 默认 |  |
| --- | --- | --- |
| `variant` | `"default"` | `mono`, (中文(简体) ), `wordmark`, (中文(简体) ), `light`, (中文(简体) ), `dark`,... 掉到 `default` 当一个品牌没有它,而不是给你一个404s的URL. |
| `size` | `128` | 鼠标的提示。 与服务的实际大小相匹配(见下文). |
| `format` | `"any"` | `"vector"` 将链条限制为 SVG 源 . |
| `providers` | `[theSVG(), gstatic()]` | 有序链;先打取胜. |

### `logoUrl(input, options?) → string | null`

仅限URL.

### `fetchLogo(input, options?) → Promise<FetchedLogo | null>`

下载图像并 **确认它存在**沿着链子走 直到回复通过供应商自己的支票 添加数 `body: ArrayBuffer`附加时 `svg: string` 当结果为向量时.

```ts
const hit = await fetchLogo("stripe.com");
hit.svg; // "<svg viewBox=..."
```

在渲染前需要知道时使用这个——嵌入到PDF,电子邮件,OG图像中. 对于 `<img>`,选择 `logo()` 让浏览器获取.

> Google的favicon端点没有发送 CORS 信头,所以 `fetchLogo` 从服务器到达, 但不是从浏览器到达 . `logo()` + 键 `<img src>` 到处工作.

### 元数据

单独导入, 因此只使用 URL 的呼叫者不支付 :

```ts
import { meta } from "@clawnify/logokit/meta";

meta("stripe"); // { slug, title: "Stripe", hex: "635BFF", license: "CC0-1.0" }
```

主条目也出口: `variantsOf(slug)`, (中文(简体) ), `hasVariant(slug, variant)`, (中文(简体) ), `allSlugs()`, (中文(简体) ), `brandCount()`, (中文(简体) ), `lookup(query)`, (中文(简体) ), `normalize(input)`。 。 。 .

* * *

## 在反应中

替换 favicon 帮助器, 大多数工程最终会用手写 :

```tsx
import { logo } from "@clawnify/logokit";
import { useState } from "react";

export function BrandMark({ domain, size = 16 }: { domain?: string | null; size?: number }) {
  const [failed, setFailed] = useState(false);
  const hit = domain ? logo(domain, { size: size * 2 }) : null;
  if (!hit || failed) return null;

  return (
    <img
      src={hit.url}
      alt=""
      width={size}
      height={size}
      loading="lazy"
      onError={(e) => {
        // Step down the chain before giving up — see "Staleness" below.
        if (hit.fallback) e.currentTarget.src = hit.fallback.url;
        else setFailed(true);
      }}
    />
  );
}
```

已知的品牌在任何尺寸上都成为精美的SVG;其余的则被降解为外观.

* * *

## 断层

该指数是一幅移动的登记册的快照——在最后两周的25个不同日子里,上游增加了品牌. 这大多是无害的: 在你发售的版本之后添加的品牌根本找不到, 解析度会自己到达favicon层.

不无害的箱子是品牌 **已更名** 上游地区 解析度仍能相对于已死指数和URL 404s成功. 任何同步都无法发现.. `logo()` 没有I/O的设计.

因此,每个结果都包含链子的其余部分:

```ts
const hit = logo("stripe.com");
hit.url;             // theSVG vector
hit.fallback.url;    // the favicon, if the vector is dead
```

线 `fallback` 输入 `onError` 并且一个呆板的入口会退化成外衣而不是空地. `fetchLogo()` 已经处理它本身——它验证每个提供者,并经过任何失败.

`fallback` 当没有其它信息可以提供查询时, 则不存在: `format: "vector"` (鼠标故意被排除在外),或用于品牌查询,因为favicon级需要域名.

升级软件包可以刷新索引 . `npm run build:index` 如果你不想等待释放的话 就重新生成它.

* * *

## 国 际

```bash
$ npx @clawnify/logokit stripe.com
https://thesvg.org/icons/stripe/default.svg
svg · thesvg · license: CC0-1.0

$ npx @clawnify/logokit "Hugging Face" --vector
$ npx @clawnify/logokit github.com --variant mono --json
```

输出 `1` 当什么也没有发现时,它就编成剧本.

* * *

## 供应商

提供者是一个普通对象,链条是一个命令阵列. 添加出处是本地变化——没有注册登记.

```ts
import { logo, lookup, gstatic } from "@clawnify/logokit";

// Simple Icons — CC0, keyed by the same slugs
const simpleIcons = {
  name: "simple-icons",
  vector: true,
  resolve(query) {
    const slug = lookup(query);
    if (!slug) return null;
    return {
      url: `https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/${slug}.svg`,
      format: "svg", vector: true, source: "simple-icons", slug, verified: false,
    };
  },
};

logo("stripe.com", { providers: [simpleIcons, gstatic()] });
```

添加可选 `verify(response) → boolean` 拒绝那些看起来很成功但并不成功的反应——见下文,说明为什么存在这种情况.

### 内建

| 提供者 | 覆盖范围 | 格式 | 密钥 |
| --- | --- | --- | --- |
| `theSVG()` | 6 492个品牌 | **特别工作组** | 无 |
| `gstatic()` | 任何活域 | 巴布亚新几内亚 | 无 |

`theSVG({ origin })` 接受不同来源的 - 一个 jsDelivr 镜像导出为 `THESVG_JSDELIVR`,或指向图标树的自己副本.

* * *

## 如何解决

该套装船从SVG的公共注册、绘图中生成了一个索引(~106 KB gziped) **3 547个域** 财务报告和审定财务报表 **5 399份名称表** 在弹道上。 寻找是一个 `Map` 所以失事就一文不值 从不烧掉请求.

两个细节值得了解, 都从终点而不是他们的文件学到:

**共享主页不被猜测 .** 大约500个开源项目清单 `github.com` 作为主页,~630 Azure 产品标记列表 `azure.microsoft.com`向任意成员绘制共享域图,将使 `logo("github.com")` 回来,说 `axios` 标记。 只有一位候选人才能解决碰撞 _实值_ 域; **71个未明确的领域被删除** 掉入法维孔层 正确的favicon胜过一个自信错误的品牌. 每个空出域列表于 [`src/data/ambiguous-domains.json`](https://npmcn.com/package/%40clawnify/logokit/src/data/ambiguous-domains.json) 所以这些疏漏是可以审计的 而不是神秘的.

**两个失败模式看起来像是成功.** Google 的 favicon 端点答错 `404` _财务报告和审定财务报表_ 一个有效的巴布亚新几内亚机构——一个通用的灰色地球. 代码,检查"字节到了吗?" 让地球和报告成功,所以 `gstatic`是因为 `verify` 门在状态。 外边的大小 `16, 24, 32, 48, 64, 96, 128, 256` 返回时 `200` 带着16×16的无声图像,所以请求的尺寸会被折断后再到达电线.

* * *

## 重量

指数是代价 如果你捆绑,它已经可以免去:

```ts
import { gstatic, normalize } from "@clawnify/logokit"; // 636 B gzipped
import { logo } from "@clawnify/logokit";               // 109 KB gzipped
```

树摇动当没有引用时会降低索引. 节点和工人不 树摇,虽然,他们评价整个模块图的导入,所以主要 输入成本为每寒冷需花上几毫秒和 ~1.4 MB 无论你是否开始 解决一个品牌.

如果favions是真正的所有你想要的, 仅进入光栅:

```ts
import { logo } from "@clawnify/logokit/gstatic";

logo("stripe.com"); // { format: "png", source: "gstatic", verified: false }
```

相同的法维孔级, 相同的大小相接,相同的 `fetchLogo` 状态检查 - 它只是 永不加载索引(~186 KB堆积而不是~1.4 MB). 它解决域 仅;品牌名称按定义需要索引.

更喜欢主条目 除非你已经测量和照顾。 现有病媒 是这个库存在的原因.

* * *

## 许可证发放

代码是 **麻省理工学院**。 。 。 .

**标志不是.** 它们是各自所有者的商标,列入名义公平使用范围供识别。 上游记录着每个商标的许可证, 和很多不同的—— `CC0-1.0`, (中文(简体) ), `MIT`, (中文(简体) ), `Apache-2.0`,但还有 `CC-BY-ND` (无衍生物), `Proprietary`非商业术语,以及 `Unknown`。 。 。 .

这个字段是暴露的,这样你就可以采取行动:

```ts
import { meta } from "@clawnify/logokit/meta";
meta("stripe").license; // "CC0-1.0"
```

如果您重新分配标记, 或者修改标记, 请先检查该值 。 见 [备注](https://npmcn.com/package/%40clawnify/logokit/NOTICE.md)。 。 。 .

* * *

## 贷项

矢量艺术和品牌注册来自 [**sVG 主题**](https://thesvg.org/) (单位:千美元)[克林克/ svg](https://github.com/glincker/thesvg)) (中文(简体) ). 这个软件包增加了分辨率,倒置链,以及提供者接口——它不主机或修改艺术品.

在当前登记册上刷新捆绑的索引:

```bash
npm run build:index
```

## 许可证

麻省理工学院

## 常见问题

### @clawnify/logokit 是什么？

品牌标志为SVG,有光栅回落为其他一切\. 6,492个向量,离线分辨率,零依赖\.

### 如何安装 @clawnify/logokit？

在项目目录运行 npm install @clawnify/logokit，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 logokit，可以用 npx logokit 直接运行。

### @clawnify/logokit 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @clawnify/logokit 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @clawnify/logokit 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @clawnify/logokit 可以商用吗？

@clawnify/logokit 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @clawnify/logokit 的下载量有多少？

根据 npm 官方下载统计，@clawnify/logokit 在 2026/10/10 – 2026/11/08 这 30 天内被下载 2,792 次，日均约 93 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @clawnify/logokit 还在维护吗？

最新版本 0\.3\.0 发布于 2026/07/29（3 个月前）；至今共发布 3 个版本，其中过去 12 个月发布了 3 个；首次发布于 2026/07/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。