静态 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="" />

任意颜色

上面的文件只有两种颜色。需要其他主色时,可以通过地址获取图标,无法安装依赖的 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 免费使用。 赞助本项目