@ clawnify/ logokit (帮助)
标志为 特别工作组用光栅反射其他一切.
npm i @clawnify/logokit
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 属于合同的一部分,而不是装饰:
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 相反:
logo("some-tiny-startup.io", { format: "vector" }); // null
图书馆上面的纸 你16×16 PNG,让你发现生产中的模糊.
API 密码
logo(input, options?) → Logo | null
同步。 无为网. 这是你通常想要的.
接受你实际掌握的四种形状:
logo("stripe.com"); // domain
logo("https://stripe.com/docs"); // URL
logo("[email protected]"); // 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 当结果为向量时.
const hit = await fetchLogo("stripe.com");
hit.svg; // "<svg viewBox=..."
在渲染前需要知道时使用这个——嵌入到PDF,电子邮件,OG图像中. 对于 <img>,选择 logo() 让浏览器获取.
Google的favicon端点没有发送 CORS 信头,所以
fetchLogo从服务器到达, 但不是从浏览器到达 .logo()+ 键<img src>到处工作.
元数据
单独导入, 因此只使用 URL 的呼叫者不支付 :
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 帮助器, 大多数工程最终会用手写 :
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的设计.
因此,每个结果都包含链子的其余部分:
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 如果你不想等待释放的话 就重新生成它.
国 际
$ 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 当什么也没有发现时,它就编成剧本.
供应商
提供者是一个普通对象,链条是一个命令阵列. 添加出处是本地变化——没有注册登记.
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 所以这些疏漏是可以审计的 而不是神秘的.
两个失败模式看起来像是成功. Google 的 favicon 端点答错 404 财务报告和审定财务报表 一个有效的巴布亚新几内亚机构——一个通用的灰色地球. 代码,检查"字节到了吗?" 让地球和报告成功,所以 gstatic是因为 verify 门在状态。 外边的大小 16, 24, 32, 48, 64, 96, 128, 256 返回时 200 带着16×16的无声图像,所以请求的尺寸会被折断后再到达电线.
重量
指数是代价 如果你捆绑,它已经可以免去:
import { gstatic, normalize } from "@clawnify/logokit"; // 636 B gzipped
import { logo } from "@clawnify/logokit"; // 109 KB gzipped
树摇动当没有引用时会降低索引. 节点和工人不 树摇,虽然,他们评价整个模块图的导入,所以主要 输入成本为每寒冷需花上几毫秒和 ~1.4 MB 无论你是否开始 解决一个品牌.
如果favions是真正的所有你想要的, 仅进入光栅:
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。 。 。 .
这个字段是暴露的,这样你就可以采取行动:
import { meta } from "@clawnify/logokit/meta";
meta("stripe").license; // "CC0-1.0"
如果您重新分配标记, 或者修改标记, 请先检查该值 。 见 备注。 。 。 .
贷项
矢量艺术和品牌注册来自 sVG 主题 (单位:千美元)克林克/ svg) (中文(简体) ). 这个软件包增加了分辨率,倒置链,以及提供者接口——它不主机或修改艺术品.
在当前登记册上刷新捆绑的索引:
npm run build:index
许可证
麻省理工学院