靜態 SVG

kubai-icons-static 將每個圖示提供為獨立的 SVG 檔案。顏色已寫入檔案,不需要指令碼或樣式表。

安裝

bash
npm install kubai-icons-static

檔案

svg/ 包含預設藍色 (#5393FF) 的所有圖示。svg-soft/ 包含柔和樣式(藍灰色)的所有圖示。

每個檔案都為陰影預留了額外的邊距。若要與以 24px 顯示的動態圖示大小一致,請以 28px 顯示該檔案。檔案中的每個 id 都包含圖示名稱,因此同一頁面可內嵌多個圖示。

CDN

直接從 CDN 使用這些檔案:

html
<img src="https://cdn.jsdelivr.net/npm/kubai-icons-static@0/svg/folder.svg" width="28" height="28" alt="" />

任意顏色

上述檔案提供兩種顏色。若需要其他主色,請以 URL 請求圖示。這也適合無法安裝套件的 Agent 和工具。

html
<img src="https://icons.kubai.design/api/icon/folder.svg?color=EC4899" width="28" height="28" alt="" />
  • color:六位數的十六進位色碼,可加或不加 #。預設值:5393FF。
  • variant:color 或 soft。
  • badge:semantic 或十六進位色碼,用於帶角標的圖示。
  • size:寬度和高度(像素),範圍為 16 至 2048。預設值:96。

在 jsDelivr 上,指定完整版本的 URL 會長期快取。指定主版本的 URL,例如 @0,會定期更新並取得新版本。

自訂顏色

在圖示瀏覽器中,可將圖示以指定的顏色和樣式下載為 SVG 或 PNG。這些檔案使用一般的十六進位色碼,Figma 等設計工具都能正確讀取。

中繼資料

icons.json 列出每個圖示的分類和標籤;若為帶角標的圖示,另列出基底圖示和角標。categories.json 列出所有分類。

Kubai Icons 可免費使用 贊助本專案