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