@bytecook/icons

自托管图标 CDN URL 工具库 - 6000+ 图标，中国大陆 CDN 加速

English | 中文

在线浏览

ico.bytecook.io - 在线浏览和搜索所有图标

基于 selfh.st/icons，一个为自托管服务和仪表板设计的综合图标集合。

官方包地址：jsdelivr.com/package/gh/selfhst/icons

安装

npm install @bytecook/icons
# or
pnpm add @bytecook/icons
# or
yarn add @bytecook/icons

使用方法

基础用法

import { createIconUrl } from '@bytecook/icons';

// 默认: SVG 格式, Peekabo CDN (中国加速)
createIconUrl('nginx');
// => https://ico.bytecook.io/svg/nginx.svg

// 指定格式
createIconUrl('nginx', { format: 'png' });
// => https://ico.bytecook.io/png/nginx.png

// 暗色/亮色变体
createIconUrl('nginx', { format: 'png', variant: 'dark' });
// => https://ico.bytecook.io/png/nginx-dark.png

// 使用 jsDelivr CDN (全球加速)
createIconUrl('nginx', { cdn: 'jsdelivr' });
// => https://cdn.jsdelivr.net/gh/selfhst/icons@main/svg/nginx.svg

// 自定义 CDN
createIconUrl('nginx', { cdn: 'https://my-cdn.com/icons' });
// => https://my-cdn.com/icons/svg/nginx.svg

工厂模式

import { createIconHelper } from '@bytecook/icons';

// 创建配置好的 helper
const icons = createIconHelper({
  format: 'webp',  // 默认格式
});

// 使用 helper
icons.url('docker');           // WebP 格式 (默认)
icons.svg('docker');           // 强制 SVG
icons.png('docker');           // 强制 PNG
icons.png('docker', 'dark');   // PNG 暗色变体
icons.webp('docker', 'light'); // WebP 亮色变体

默认 Helper

import { icons } from '@bytecook/icons';

// 预配置 Peekabo CDN 和 SVG 格式
icons.svg('nginx');
icons.png('nginx', 'dark');

图标元数据

import iconList from '@bytecook/icons/icons.json';

console.log(iconList.length); // 2360+ 图标

// 每个图标包含:
// {
//   name: "Nginx",
//   reference: "nginx",
//   category: "Web Server",
//   svg: true,
//   png: true,
//   webp: true,
//   light: true,
//   dark: true,
//   tags: ["web", "server", "proxy"]
// }

API 参考

createIconUrl(reference, options?)

创建完整的图标 URL。

| 参数 | 类型 | 描述 | |------|------|------| | reference | string | 图标引用/标识 (如 'nginx', 'docker') | | options.format | 'svg' \| 'png' \| 'webp' \| 'avif' \| 'ico' | 图片格式 (默认: 'svg') | | options.variant | '' \| 'light' \| 'dark' | 主题变体 (默认: '') | | options.cdn | 'bytecook' \| 'jsdelivr' \| string | CDN 源 (默认: 'bytecook') |

createIconHelper(config?)

创建配置好的图标 helper 实例。

| 参数 | 类型 | 描述 | |------|------|------| | config.baseUrl | string | 基础 CDN URL (默认: Peekabo CDN) | | config.format | IconFormat | 默认格式 (默认: 'svg') |

返回 IconHelper，包含以下方法：

• url(reference, options?) - 使用当前配置获取 URL
• svg(reference, variant?) - 获取 SVG URL
• png(reference, variant?) - 获取 PNG URL
• webp(reference, variant?) - 获取 WebP URL
• avif(reference, variant?) - 获取 AVIF URL
• ico(reference, variant?) - 获取 ICO URL

常量

import { BYTECOOK_CDN, JSDELIVR_CDN } from '@bytecook/icons';

BYTECOOK_CDN // 'https://ico.bytecook.io' (Peekabo CDN)
JSDELIVR_CDN // 'https://cdn.jsdelivr.net/gh/selfhst/icons@main'

CDN 节点

| CDN | URL | 描述 | |-----|-----|------| | Peekabo | https://ico.bytecook.io | 中国大陆加速 (默认) | | jsDelivr | https://cdn.jsdelivr.net/gh/selfhst/icons@main | 全球 CDN |

支持的格式

• SVG - 可缩放矢量图形 (推荐)
• PNG - 光栅图像
• WebP - 现代格式，压缩率好
• AVIF - 下一代格式，压缩率最佳
• ICO - Windows 图标格式

图标变体

许多图标支持亮色和暗色变体：

• 标准: nginx.svg
• 亮色: nginx-light.svg
• 暗色: nginx-dark.svg

相关链接

• 在线图标库: ico.bytecook.io
• 官方包: jsdelivr.com/package/gh/selfhst/icons
• 图标来源: selfh.st/icons
• CDN 赞助: Peekabo CDN
• 项目维护: 猫猫博客