theSVG API參考靜態(tài)站點(diǎn)架構(gòu)下如何用兩個(gè)JSON清單完成搜索、篩選與取圖【免費(fèi)下載鏈接】thesvg7,400 brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg項(xiàng)目地址: https://gitcode.com/gh_mirrors/th/thesvg想要在自己的產(chǎn)品里接入 7,400 品牌 SVG 圖標(biāo)theSVG 的 API 設(shè)計(jì)出乎意料地簡(jiǎn)單它沒有后端服務(wù)、沒有動(dòng)態(tài)搜索接口而是靠?jī)蓚€(gè)預(yù)生成的 JSON 清單registry.json和categories.json加上一個(gè)固定的 SVG 文件路徑就完成了搜索、篩選與取圖的全部工作。本文將帶你從零理解這套靜態(tài) API 參考并給出新手可直接套用的接入步驟。為什么說沒有 API 就是最好的 API傳統(tǒng)做法是每次搜索都請(qǐng)求一次后端接口比如/api/search?qgithub。theSVG 反其道而行——整個(gè)站點(diǎn)是一個(gè)純靜態(tài)站點(diǎn)部署在 CDN 上。所謂API不過是三個(gè)可以無限緩存的靜態(tài)地址地址作用說明GET /api/registry.json全量圖標(biāo)清單每個(gè)圖標(biāo)的 slug、名稱、別名、分類、品牌色、變體GET /api/categories.json分類清單115 個(gè)分類及各自圖標(biāo)數(shù)量GET /icons/{slug}/{variant}.svg取圖直接返回 SVG 文件核心思路一句話清單只拉一次搜索和篩選全部在瀏覽器里做。因?yàn)槲募庆o態(tài)且被 CDN 緩存的官方 FAQ 明確表示實(shí)際上沒有速率限制見 src/lib/docs-content.ts 中 Is there a rate limit on the API? 的回答。端點(diǎn)一registry.json——圖標(biāo)搜索的數(shù)據(jù)底座registry.json由腳本 src/scripts/generate-api.ts 在構(gòu)建時(shí)從源數(shù)據(jù) src/data/icons.json 生成見 src/scripts/generate-api.ts#L51-L65結(jié)構(gòu)如下{ total: 7400, icons: [ { slug: github, title: GitHub, aliases: [git hub], categories: [Software, Platform], hex: 181717, url: https://github.com/, license: MIT, variants: [default, mono] } ] }每個(gè)字段都有明確用途slug圖標(biāo)的唯一標(biāo)識(shí)kebab-case如openai是取圖 URL 的關(guān)鍵titlealiases搜索匹配的兩個(gè)字段別名讓 git 也能命中 GitHubcategories分類篩選的依據(jù)一個(gè)圖標(biāo)可屬于多個(gè)分類hex品牌主色不含#可做配色或圖標(biāo)底色variants該圖標(biāo)擁有的變體列表。default永遠(yuǎn)存在mono單色、light/dark、wordmark文字商標(biāo)等最多 7 種 新手提示URL 路徑用的是精確的slug而不是品牌顯示名?？崭瘛Ⅻc(diǎn)號(hào)和大小寫都被規(guī)范化了所以不要憑品牌名猜 URL先查清單再取圖這也是官方 FAQ 里 404 問題的第一原因。端點(diǎn)二categories.json——分類篩選器categories.json同樣由 src/scripts/generate-api.ts#L68-L83 生成是遍歷每個(gè)圖標(biāo)的categories字段聚合出的計(jì)數(shù)結(jié)果{ categories: [ { name: AI, count: 320 }, { name: Cloud, count: 540 }, { name: Payment, count: 180 } ] }拿到這份數(shù)據(jù)后你只需在頁面上渲染一排分類膠囊按鈕theSVG 官網(wǎng)自己就是這么做的參考 src/components/filters/category-pills.tsx點(diǎn)擊某個(gè)分類時(shí)用registry.json里的categories字段做一次filter即可。三步完成搜索、篩選與取圖把兩個(gè)清單串起來整個(gè)接入流程只有三步第 1 步一次性拉取清單const res await fetch(https://thesvg.org/api/registry.json); const { icons } await res.json();官方文檔里的 Search the catalog client-side 技巧src/lib/docs-content.ts#L278-L285正是這個(gè)思路清單在內(nèi)存里每次按鍵都不發(fā)網(wǎng)絡(luò)請(qǐng)求。第 2 步客戶端過濾搜索 匹配title或aliases篩選 匹配categories排序 用hex或dateAdded。這些都是純內(nèi)存操作萬級(jí)數(shù)據(jù)量毫無壓力。第 3 步用 slug 拼出圖片 URL找到目標(biāo)圖標(biāo)后取圖地址就是一個(gè)固定模板https://thesvg.org/icons/{slug}/{variant}.svg例如https://thesvg.org/icons/openai/default.svg。在頁面里就是一個(gè)普通img標(biāo)簽官方最佳實(shí)踐還提醒務(wù)必寫上 width 和 height避免圖標(biāo)加載時(shí)頁面抖動(dòng)src/lib/docs-content.ts#L200-L218。?? 如果你需要?jiǎng)討B(tài)圖標(biāo)圖標(biāo)名來自用戶輸入或 CMS直接按 slug 拼 URL 比引入全部組件更好——零打包成本任意 7,400 圖標(biāo)都能渲染。高流量場(chǎng)景用鏡像而不是硬懟主站清單和 SVG 都在 CDN 上但對(duì)超大規(guī)模生產(chǎn)應(yīng)用官方建議走 jsDelivr 鏡像或自建托管清單鏡像https://cdn.jsdelivr.net/gh/glincker/thesvgmain/src/data/icons.json—— 這是權(quán)威源數(shù)據(jù)比registry.json多l(xiāng)icense、dateAdded等完整字段圖片鏡像https://cdn.jsdelivr.net/gh/glincker/thesvgmain/public/icons/{slug}/{variant}.svg兩條生產(chǎn)建議來自官方最佳實(shí)踐src/lib/docs-content.ts#L212-L222把main釘?shù)骄唧w release 標(biāo)簽避免上游改名悄悄改變你的渲染結(jié)果倉庫約 30 MB可以 clone 下來完全自托管代碼是 MIT 許可常見疑問速查FAQ 精選以下問題整理自官網(wǎng)文檔src/lib/docs-content.ts#L293-L364問題簡(jiǎn)短答案API 有速率限制嗎兩個(gè) JSON 是靜態(tài) CDN 文件實(shí)際上沒有限制圖標(biāo) 404 了怎么辦十有八九是 slug 猜錯(cuò)了查清單里的精確 slug為什么某些圖標(biāo)沒有 dark 變體不是每個(gè)品牌都有全部 7 種變體只有default保證存在有實(shí)時(shí)搜索 API 嗎規(guī)劃中的api.thesvg.org會(huì)提供 token 制接口相關(guān)搜索、webhook目前靜態(tài)清單是唯一官方路徑小結(jié)靜態(tài)架構(gòu)的三個(gè)好處快全鏈路 CDN 緩存首字節(jié)時(shí)間極低瀏覽器還能長(zhǎng)效緩存清單穩(wěn)沒有后端故障面鏡像與自托管隨時(shí)可用簡(jiǎn)單新人 10 分鐘就能讀懂 src/scripts/generate-api.ts 的完整生成邏輯并據(jù)此在自己的項(xiàng)目里復(fù)刻同樣的模式相關(guān)代碼與資料清單生成腳本src/scripts/generate-api.ts源數(shù)據(jù)清單src/data/icons.json官網(wǎng)文檔內(nèi)容API 片段、技巧、FAQsrc/lib/docs-content.ts面向 AI 的完整 LLM 說明public/llms.txt、public/llms-full.txt客戶端清單加載實(shí)現(xiàn)src/lib/icons-manifest.ts【免費(fèi)下載鏈接】thesvg7,400 brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg項(xiàng)目地址: https://gitcode.com/gh_mirrors/th/thesvg創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考