靜態 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 列出所有分類。