chromeextensioniconsskill

内容来源：README.md（说明文档） · 原始地址 · 查看安装指南

原始内容

<div align="center">

# 🎨 Chrome Extension Icons

**浏览器扩展图标自动化生成工具**

[![Version](https://img.shields.io/badge/version-1.0.0-blue?style=flat-square)](https://github.com/Boulea7/ChromeExtensionIconsSkill/releases)
[![License](https://img.shields.io/badge/license-MIT-green?style=flat-square)](https://github.com/Boulea7/ChromeExtensionIconsSkill/blob/main/LICENSE)
[![Node](https://img.shields.io/badge/node-%3E%3D18.17.0-brightgreen?style=flat-square)](https://nodejs.org/)
[![Icons](https://img.shields.io/badge/icons-275%2C000%2B-orange?style=flat-square)](https://iconify.design/)
[![Stars](https://img.shields.io/github/stars/Boulea7/ChromeExtensionIconsSkill?style=flat-square)](https://github.com/Boulea7/ChromeExtensionIconsSkill/stargazers)

一个强大的工具，让 Chrome 扩展图标生成变得简单。从 Iconify 的 **275,000+** 免费图标库中搜索，自动生成 Chrome 要求的 **4 种尺寸** PNG 图标，并自动更新 `manifest.json` 配置。

[English](https://github.com/Boulea7/ChromeExtensionIconsSkill/blob/HEAD/README_EN.md) | 简体中文

[快速开始](#-快速开始) • [功能特性](#-功能特性) • [使用文档](#-使用文档) • [常见问题](#-常见问题)

</div>

---

## 🌟 为什么选择这个工具？

开发 Chrome 扩展时，你是否遇到过这些麻烦：

- ❌ 需要手动搜索和下载图标
- ❌ 需要用 Photoshop/Sketch 调整 4 种不同尺寸
- ❌ 需要手动编辑 manifest.json 配置
- ❌ 图标格式不符合 Chrome 要求

**现在，一行命令搞定一切！** ✨

```bash
node skill/scripts/generate-icons.js generate --icon "mdi:calendar" --output "./icons"
```

✅ 自动搜索最佳图标
✅ 自动生成 4 种尺寸 PNG
✅ 自动更新 manifest.json
✅ 仅需 **3 秒**完成全部流程

---

## ✨ 功能特性

<table>
<tr>
<td width="50%">

### 🔍 海量图标库
从 Iconify 的 **275,000+** 免费开源图标中搜索，涵盖：
- Material Design Icons (7,000+)
- Font Awesome (2,000+)
- Heroicons, Lucide, Carbon...
- 200+ 图标集合

</td>
<td width="50%">

### 🎨 一键生成
自动生成 Chrome 要求的全部尺寸：
- **16x16** - Favicon、工具栏图标
- **32x32** - Windows 任务栏
- **48x48** - 扩展管理页面 ⭐ 必需
- **128x128** - Web Store 展示 ⭐ 必需

</td>
</tr>
<tr>
<td>

### 🌈 颜色定制
轻松应用品牌色：
```bash
--color "#ba3329"
```
将图标转换为你的品牌配色

</td>
<td>

### 📁 本地转换
已有 logo？直接转换：
```bash
--input "./my-logo.svg"
```
将你的 SVG logo 转换为标准格式

</td>
</tr>
<tr>
<td>

### 📦 批量处理
一次处理多个项目：
```json
{
  "projects": [
    { "icon": "mdi:calendar", ... },
    { "icon": "mdi:music", ... }
  ]
}
```

</td>
<td>

### ⚡ 极速性能
- 搜索：< 1 秒
- 生成：< 3 秒
- 文件：仅 3-4 KB
- 成功率：100%

</td>
</tr>
</table>

---

## 🚀 快速开始

### 方式一：作为 Claude Code Skill 使用 ⭐ 推荐

如果你使用 **Claude Code**，可以将本工具安装为 Skill，通过自然语言对话使用。

#### 📦 安装 Skill

**步骤 1：克隆仓库**

```bash
git clone https://github.com/Boulea7/ChromeExtensionIconsSkill.git
cd ChromeExtensionIconsSkill
```

**步骤 2：部署 Skill**

选择以下任一方式：

<details>
<summary><b>选项 A：个人 Skill（仅你自己使用）</b></summary>

```bash
# 创建个人 Skill 目录
mkdir -p ~/.claude/skills/chrome-extension-icons

# 复制 Skill 文件
cp -r skill/* ~/.claude/skills/chrome-extension-icons/

# 安装依赖
cd ~/.claude/skills/chrome-extension-icons
npm install
```

**验证安装**：
```bash
ls ~/.claude/skills/chrome-extension-icons/SKILL.md
# 应显示：SKILL.md 文件路径
```

</details>

<details>
<summary><b>选项 B：符号链接（推荐开发者）</b></summary>

```bash
# 使用符号链接，便于后续更新
ln -s "$(pwd)/skill" ~/.claude/skills/chrome-extension-icons

# 安装依赖
cd ~/.claude/skills/chrome-extension-icons
npm install
```

**优点**：修改源代码后无需重新复制

</details>

<details>
<summary><b>选项 C：项目 Skill（团队共享）</b></summary>

如果你想让团队成员也能使用：

```bash
# 在你的扩展项目根目录
mkdir -p .claude/skills/chrome-extension-icons
cp -r /path/to/ChromeExtensionIconsSkill/skill/* .claude/skills/chrome-extension-icons/

# 提交到 Git
git add .claude/skills/
git commit -m "Add chrome-extension-icons Skill"
git push

# 团队成员 pull 后自动可用
```

</details>

**步骤 3：验证 Skill 可用**

在 Claude Code 中询问：
```
我需要为 Chrome 扩展生成一个日历图标
```

Claude 应该自动使用此 Skill 帮你搜索、生成图标。

#### 🎯 如何使用 Skill

**完全自然语言交互**，无需记忆命令：

```
"我想为我的书签管理扩展添加一个书签图标"
"生成一个音乐图标，颜色用 #ba3329"
"帮我把 company-logo.svg 转换成 Chrome 扩展图标"
"我有 3 个扩展项目需要批量生成图标"
```

Claude 会自动：
1. 🔍 搜索相关图标
2. 📋 展示最佳匹配和预览链接
3. 💬 询问你的确认
4. 🎨 生成 4 种尺寸的 PNG
5. 📝 更新 manifest.json
6. ✅ 报告完成情况和备选方案

#### ⚙️ Skill 触发条件

Skill 会在以下情况自动激活：
- 提到 "extension icon"（扩展图标）
- 提到 "browser extension icon"（浏览器扩展图标）
- 提到 "chrome icon"（Chrome 图标）
- 提到 "add icon to extension"（为扩展添加图标）
- 提到 "manifest.json icon setup"（manifest 图标配置）

#### 🔧 系统要求

- **Claude Code** - [下载安装](https://code.claude.com/)
- **Node.js** >= 18.17.0
- **Sharp 依赖**：部分系统需要先安装 libvips

<details>
<summary><b>Sharp 安装问题？点击查看解决方案</b></summary>

**macOS**:
```bash
brew install vips
cd ~/.claude/skills/chrome-extension-icons && npm install
```

**Ubuntu/Debian**:
```bash
sudo apt-get install libvips-dev
cd ~/.claude/skills/chrome-extension-icons && npm install
```

**Windows**:
```bash
npm install --global windows-build-tools
cd ~/.claude/skills/chrome-extension-icons && npm install
```

</details>

---

### 方式二：直接使用命令行工具

如果你不使用 Claude Code，也可以直接运行脚本。

#### 📦 安装

```bash
# 1. 克隆仓库
git clone https://github.com/Boulea7/ChromeExtensionIconsSkill.git
cd ChromeExtensionIconsSkill

# 2. 安装依赖
npm install

# 3. 测试运行
node skill/scripts/generate-icons.js search "star"
```

#### 🎯 基础用法

<details>
<summary><b>1. 搜索图标</b></summary>

```bash
node skill/scripts/generate-icons.js search "calendar"
```

返回匹配的图标列表和预览链接。

</details>

<details>
<summary><b>2. 生成图标</b></summary>

```bash
node skill/scripts/generate-icons.js generate \
  --icon "mdi:calendar" \
  --output "./icons" \
  --manifest "./manifest.json"
```

自动生成 4 个尺寸并更新配置。

</details>

<details>
<summary><b>3. 自定义颜色</b></summary>

```bash
node skill/scripts/generate-icons.js generate \
  --icon "mdi:home" \
  --color "#ba3329"
```

</details>

<details>
<summary><b>4. 转换本地 SVG</b></summary>

```bash
node skill/scripts/generate-icons.js convert \
  --input "./my-logo.svg" \
  --output "./icons"
```

</details>

<details>
<summary><b>5. 批量处理</b></summary>

创建 `batch-config.json`：
```json
{
  "projects": [
    {
      "name": "项目A",
      "icon": "mdi:calendar",
      "output": "./projectA/icons",
      "manifest": "./projectA/manifest.json"
    }
  ]
}
```

运行：
```bash
node skill/scripts/generate-icons.js batch --config batch-config.json
```

</details>

---

## 📸 效果演示

### 搜索图标

```bash
$ node skill/scripts/generate-icons.js search "calendar"

🔍 搜索 "calendar"...
✨ 找到 32 个图标：

1. mdi:calendar
   预览: https://icon-sets.iconify.design/mdi/icons/calendar.html

2. mdi:calendar-outline
   预览: https://icon-sets.iconify.design/mdi/icons/calendar-outline.html

3. material-symbols:calendar
   预览: https://icon-sets.iconify.design/material-symbols/icons/calendar.html

💡 最佳匹配: mdi:calendar
```

### 生成图标

```bash
$ node skill/scripts/generate-icons.js generate --icon "mdi:calendar" --output "./icons"

⬇️  下载: mdi:calendar
✓ 已下载 240 bytes
🔄 转换为 PNG...
✓ 已生成 16x16: icons/icon16.png (0.2 KB)
✓ 已生成 32x32: icons/icon32.png (0.2 KB)
✓ 已生成 48x48: icons/icon48.png (0.3 KB)
✓ 已生成 128x128: icons/icon128.png (0.6 KB)
📝 更新 manifest.json...
✓ 已创建: ./manifest.json

✅ 图标生成完成！
   已生成 4 个 PNG 文件
   总大小: 1.3 KB
```

### 自动更新 manifest.json

```json
{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}
```

---

## 📖 使用文档

### 命令参数详解

<details>
<summary><b>search - 搜索图标</b></summary>

```bash
node skill/scripts/generate-icons.js search <关键词>
```

**示例**:
```bash
node skill/scripts/generate-icons.js search "music"
node skill/scripts/generate-icons.js search "settings"
node skill/scripts/generate-icons.js search "bookmark"
```

**返回**:
- 匹配图标列表（最多 20 个）
- 每个图标的预览链接
- 最佳匹配建议

</details>

<details>
<summary><b>generate - 生成图标（从 Iconify）</b></summary>

```bash
node skill/scripts/generate-icons.js generate [选项]
```

**必需参数**:
- `--icon <id>` - Iconify 图标 ID（格式：`prefix:name`，如 `mdi:home`）

**可选参数**:
- `--output <目录>` - 输出目录（默认：`./icons`）
- `--manifest <路径>` - manifest.json 路径（默认：`./manifest.json`）
- `--color <颜色>` - Hex 颜色（如：`#ff0000`）
- `--sizes <尺寸>` - 自定义尺寸（如：`16,32,48,128,256`）

**示例**:
```bash
# 基础使用
node skill/scripts/generate-icons.js generate --icon "mdi:home"

# 自定义颜色
node skill/scripts/generate-icons.js generate --icon "mdi:star" --color "#ba3329"

# 自定义尺寸和路径
node skill/scripts/generate-icons.js generate \
  --icon "mdi:music" \
  --output "./assets/icons" \
  --manifest "./src/manifest.json" \
  --sizes "16,24,32,48,128"
```

</details>

<details>
<summary><b>convert - 转换本地 SVG</b></summary>

```bash
node skill/scripts/generate-icons.js convert [选项]
```

**必需参数**:
- `--input <文件>` - 本地 SVG 文件路径

**可选参数**:
- `--output <目录>` - 输出目录（默认：`./icons`）
- `--manifest <路径>` - manifest.json 路径
- `--color <颜色>` - 应用颜色（会替换 SVG 中的填充色）
- `--sizes <尺寸>` - 自定义尺寸

**示例**:
```bash
# 转换公司 logo
node skill/scripts/generate-icons.js convert \
  --input "./company-logo.svg" \
  --output "./icons"

# 转换并改色
node skill/scripts/generate-icons.js convert \
  --input "./logo.svg" \
  --output "./icons" \
  --color "#2563eb"
```

</details>

<details>
<summary><b>batch - 批量处理</b></summary>

```bash
node skill/scripts/generate-icons.js batch --config <配置文件>
```

**配置文件格式**:
```json
{
  "projects": [
    {
      "name": "日历扩展",
      "icon": "mdi:calendar",
      "output": "./project-calendar/icons",
      "manifest": "./project-calendar/manifest.json"
    },
    {
      "name": "音乐扩展",
      "icon": "mdi:music",
      "output": "./project-music/icons",
      "manifest": "./project-music/manifest.json",
      "color": "#ff0000"
    },
    {
      "name": "本地 Logo",
      "input": "./my-logo.svg",
      "output": "./project-logo/icons",
      "manifest": "./project-logo/manifest.json"
    }
  ]
}
```

**示例**:
```bash
node skill/scripts/generate-icons.js batch --config batch-config.json
```

</details>

---

## 🎯 使用示例

### 场景 1: 新项目快速开始

```bash
# 搜索合适的图标
node skill/scripts/generate-icons.js search "bookmark"

# 选择 mdi:bookmark 并生成
node skill/scripts/generate-icons.js generate \
  --icon "mdi:bookmark" \
  --output "./icons" \
  --manifest "./manifest.json"
```

**结果**:
- ✅ 生成 4 个 PNG 文件
- ✅ 创建 manifest.json（如果不存在）
- ✅ 配置正确的图标路径

### 场景 2: 使用品牌色

```bash
# 生成红色的心形图标
node skill/scripts/generate-icons.js generate \
  --icon "mdi:heart" \
  --color "#e11d48" \
  --output "./icons"
```

**适用于**: 单色 SVG 图标
**效果**: 所有填充色替换为指定颜色

### 场景 3: 转换公司 Logo

```bash
# 将公司的 logo.svg 转换为 Chrome 格式
node skill/scripts/generate-icons.js convert \
  --input "./assets/company-logo.svg" \
  --output "./extension/icons" \
  --manifest "./extension/manifest.json"
```

### 场景 4: 管理多个扩展项目

```bash
# 创建批量配置
cat > my-extensions.json << 'EOF'
{
  "projects": [
    {
      "name": "待办事项扩展",
      "icon": "mdi:checkbox-marked",
      "output": "./todo-extension/icons",
      "manifest": "./todo-extension/manifest.json"
    },
    {
      "name": "书签管理器",
      "icon": "mdi:bookmark-multiple",
      "output": "./bookmark-manager/icons",
      "manifest": "./bookmark-manager/manifest.json",
      "color": "#3b82f6"
    },
    {
      "name": "密码管理器",
      "icon": "mdi:shield-key",
      "output": "./password-manager/icons",
      "manifest": "./password-manager/manifest.json",
      "color": "#10b981"
    }
  ]
}
EOF

# 一次性生成全部
node skill/scripts/generate-icons.js batch --config my-extensions.json
```

---

## 📊 性能表现

<table>
<tr>
<th>指标</th>
<th>数值</th>
<th>评级</th>
</tr>
<tr>
<td>🔍 搜索速度</td>
<td>0.8-1.2 秒</td>
<td>⚡️ 优秀</td>
</tr>
<tr>
<td>🎨 单图标生成</td>
<td>1.5-2.5 秒</td>
<td>⚡️ 优秀</td>
</tr>
<tr>
<td>📦 批量 4 项目</td>
<td>~2.3 秒</td>
<td>🚀 极优</td>
</tr>
<tr>
<td>💾 16x16 文件</td>
<td>~300 字节</td>
<td>💎 完美</td>
</tr>
<tr>
<td>💾 128x128 文件</td>
<td>~1.5 KB</td>
<td>💎 完美</td>
</tr>
<tr>
<td>📦 4 个图标总大小</td>
<td>3-4 KB</td>
<td>💎 完美</td>
</tr>
</table>

---

## 🛠️ Chrome Extension 图标要求

Chrome 扩展对图标有严格要求，本工具自动满足所有规范：

| 尺寸 | 用途 | 是否必需 | 生成文件 |
|------|------|----------|----------|
| 16x16 | Favicon、工具栏 | 推荐 | ✅ icon16.png |
| 32x32 | Windows 任务栏 | 推荐 | ✅ icon32.png |
| 48x48 | 扩展管理页面 | **必需** | ✅ icon48.png |
| 128x128 | Web Store、安装对话框 | **必需** | ✅ icon128.png |

**格式要求**:
- ✅ PNG 格式（唯一支持的格式）
- ✅ 透明背景支持
- ❌ SVG 不支持（Chrome 限制）

**manifest.json 配置**:

本工具自动生成正确的配置：

```json
{
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}
```

---

## 💡 使用技巧

### ✅ 推荐做法

1. **先预览再生成**: 使用 `search` 命令查看图标样式，点击预览链接确认
2. **选择简单图标**: 扁平化设计在小尺寸（16x16）下显示更清晰
3. **使用品牌色**: 单色图标配合 `--color` 参数效果最佳
4. **批量处理**: 多个项目用 batch 模式节省时间
5. **保持文件小**: 生成的 PNG 总大小应 < 100 KB

### ⚠️ 注意事项

1. **复杂 SVG 可能失真**: 包含渐变、滤镜的图标建议选择其他简单风格
2. **颜色功能限制**: 只能替换纯色填充，不影响渐变和图案
3. **文件路径**: manifest.json 中使用相对路径，确保正确性

---

## 🔧 常见问题

<details>
<summary><b>Q: Sharp 安装失败怎么办？</b></summary>

Sharp 依赖 libvips 图像处理库，部分系统需要手动安装：

**macOS**:
```bash
brew install vips
cd skill && npm install
```

**Ubuntu/Debian**:
```bash
sudo apt-get install libvips-dev
cd skill && npm install
```

**Windows**:
通常会自动安装。如果失败：
```bash
npm install --global windows-build-tools
cd skill && npm install
```

</details>

<details>
<summary><b>Q: Claude Code 没有使用我的 Skill？</b></summary>

**原因 1**：Skill 未正确安装

验证方法：
```bash
ls ~/.claude/skills/chrome-extension-icons/SKILL.md
```

**原因 2**：触发短语不匹配

确保你的描述包含关键词：
- "扩展图标" 或 "extension icon"
- "Chrome 图标" 或 "chrome icon"
- "浏览器扩展" 或 "browser extension"

**原因 3**：依赖未安装

```bash
cd ~/.claude/skills/chrome-extension-icons
npm install
```

</details>

<details>
<summary><b>Q: API 请求失败或超时？</b></summary>

**原因**: 网络问题或 Iconify API 暂时不可用

**解决方案**:
- 脚本会自动重试 3 次
- 检查网络连接
- 等待片刻后重试
- 或使用本地 SVG：`convert --input "./logo.svg"`

</details>

<details>
<summary><b>Q: 生成的图标不满意？</b></summary>

**方案 1**: 尝试其他关键词
```bash
# 如果 "calendar" 结果不理想
node skill/scripts/generate-icons.js search "schedule"
node skill/scripts/generate-icons.js search "date"
```

**方案 2**: 选择不同的图标集
- Material Design: `mdi:*`
- Font Awesome: `fa:*`
- Heroicons: `heroicons:*`
- Carbon: `carbon:*`
- Lucide: `lucide:*`

**方案 3**: 使用自己的 SVG
```bash
node skill/scripts/generate-icons.js convert --input "./my-design.svg"
```

</details>

<details>
<summary><b>Q: 如何自定义图标颜色？</b></summary>

```bash
# 使用 --color 参数，支持 3 位或 6 位 Hex 颜色
node skill/scripts/generate-icons.js generate \
  --icon "mdi:home" \
  --color "#ba3329"   # 6 位完整格式

# 或简写
  --color "#f00"      # 3 位简写
```

**注意**: 颜色功能最适合单色 SVG。复杂图标（多色、渐变）可能效果不佳。

</details>

<details>
<summary><b>Q: 可以生成其他尺寸吗？</b></summary>

可以！使用 `--sizes` 参数：

```bash
node skill/scripts/generate-icons.js generate \
  --icon "mdi:star" \
  --sizes "16,24,32,48,64,128,256"
```

**常用尺寸**:
- Chrome 标准: 16, 32, 48, 128
- 高清显示: 24, 64, 256
- 自定义: 任何 1-1024 之间的尺寸

</details>

<details>
<summary><b>Q: 批量处理如何配置？</b></summary>

创建 JSON 配置文件，每个项目可以：
- 使用 Iconify 图标（`icon` 字段）
- 或转换本地 SVG（`input` 字段）
- 自定义颜色、尺寸、路径

```json
{
  "projects": [
    {
      "name": "项目 A",
      "icon": "mdi:calendar",
      "output": "./projectA/icons",
      "manifest": "./projectA/manifest.json"
    },
    {
      "name": "项目 B",
      "input": "./logo-b.svg",
      "output": "./projectB/icons",
      "manifest": "./projectB/manifest.json",
      "color": "#ff0000",
      "sizes": [16, 32, 48, 128, 256]
    }
  ]
}
```

</details>

---

## 📂 项目结构

```
ChromeExtensionIconsSkill/
├── 📄 README.md                       # 本文档（中文）
├── 📄 README_EN.md                    # 英文文档
├── 📄 LICENSE                         # MIT 许可证
├── 📦 package.json                    # 项目配置
├── 🎯 skill/                          # 核心代码目录
│   ├── 📄 SKILL.md                   # Claude Code Skill 定义
│   ├── 📦 package.json               # 依赖配置
│   ├── 📁 scripts/
│   │   └── 💻 generate-icons.js      # 主脚本（~400 行）
│   └── 📁 examples/
│       └── 📄 usage.md               # 详细使用示例（10 个场景）
└── 🔌 plugin/                         # 插件打包目录
    ├── 📦 package.json
    └── 📁 .claude-plugin/
        ├── 📄 plugin.json            # 插件元数据
        └── 📁 skills/                # Skill 符号链接
```

---

## 🤝 贡献指南

我们欢迎所有形式的贡献！

### 如何贡献

1. **Fork** 本仓库
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 **Pull Request**

### 贡献方向

- 🐛 报告 Bug
- 💡 提出新功能建议
- 📝 改进文档
- 🎨 优化代码
- 🌍 翻译文档

### 代码规范

- 使用清晰的变量命名
- 添加必要的注释（英文）
- 遵循现有代码风格

---

## 📄 许可证

本项目采用 **MIT 许可证** - 详见 [LICENSE](https://github.com/Boulea7/ChromeExtensionIconsSkill/tree/HEAD/LICENSE) 文件

这意味着你可以：
- ✅ 自由使用、修改、分发
- ✅ 用于商业项目
- ✅ 二次开发
- ⚠️ 需保留原作者版权声明

---

## 🙏 致谢

### 技术支持

- [**Iconify**](https://iconify.design/) - 提供 275,000+ 免费开源图标
- [**Sharp**](https://sharp.pixelplumbing.com/) - 高性能 Node.js 图像处理库
- [**Chrome Extension 文档**](https://developer.chrome.com/docs/extensions/) - 官方开发指南

### 社区支持

感谢所有 Star、Fork 和贡献代码的开发者们！❤️

---

## 📞 联系方式

<div align="center">

[![GitHub Issues](https://img.shields.io/badge/Issues-提交问题-red?style=flat-square&logo=github)](https://github.com/Boulea7/ChromeExtensionIconsSkill/issues)
[![GitHub Discussions](https://img.shields.io/badge/Discussions-讨论交流-blue?style=flat-square&logo=github)](https://github.com/Boulea7/ChromeExtensionIconsSkill/discussions)

</div>

- 🐛 **报告 Bug**: [提交 Issue](https://github.com/Boulea7/ChromeExtensionIconsSkill/issues/new)
- 💬 **功能建议**: [开启 Discussion](https://github.com/Boulea7/ChromeExtensionIconsSkill/discussions)
- 📧 **其他咨询**: 通过 GitHub Issues 联系

---

## 🔗 相关资源

### 官方文档

- [Chrome Extension 开发指南](https://developer.chrome.com/docs/extensions/)
- [Chrome Extension Icons 规范](https://developer.chrome.com/docs/extensions/reference/manifest/icons)
- [Manifest V3 文档](https://developer.chrome.com/docs/extensions/mv3/intro/)
- [Claude Code Skills 文档](https://code.claude.com/docs/skills)

### 图标资源

- [Iconify 图标库](https://iconify.design/) - 275,000+ 免费图标
- [Material Design Icons](https://materialdesignicons.com/) - 7,000+ 图标
- [Heroicons](https://heroicons.com/) - 精美的手工制作图标
- [Lucide Icons](https://lucide.dev/) - 美观的开源图标

### 开发工具

- [Sharp 文档](https://sharp.pixelplumbing.com/) - 图像处理库
- [Chrome Web Store](https://chrome.google.com/webstore) - 扩展发布平台

---

## 📈 路线图

### v1.0.0 ✅ 当前版本

- ✅ 基础搜索和生成功能
- ✅ 自定义颜色支持
- ✅ 本地 SVG 转换
- ✅ 批量处理
- ✅ 自动 manifest 更新
- ✅ Claude Code Skill 集成

### v1.1.0 🔄 计划中

- ⏳ 懒加载 Sharp（优化启动速度）
- ⏳ 改进错误处理和重试逻辑
- ⏳ 支持 browser_action 和 page_action
- ⏳ 增强输入校验
- ⏳ 添加图标预览功能

### v2.0.0 💭 未来展望

- 💭 Web 界面
- 💭 图标编辑功能
- 💭 支持更多图标源
- 💭 CI/CD 集成
- 💭 VSCode 扩展

---

## 🌟 Star History

如果这个项目对你有帮助，请给个 ⭐ Star 支持一下！

[![Star History Chart](https://api.star-history.com/svg?repos=Boulea7/ChromeExtensionIconsSkill&type=Date)](https://star-history.com/#Boulea7/ChromeExtensionIconsSkill&Date)

---

<div align="center">

### Made with ❤️ for Chrome Extension Developers

如果这个工具帮到了你，别忘了给个 ⭐ **Star**！

[⬆️ 回到顶部](#-chrome-extension-icons)

</div>

🎨 Chrome Extension Icons

浏览器扩展图标自动化生成工具

一个强大的工具，让 Chrome 扩展图标生成变得简单。从 Iconify 的 275,000+ 免费图标库中搜索，自动生成 Chrome 要求的 4 种尺寸 PNG 图标，并自动更新 manifest.json 配置。

English | 简体中文

快速开始 • 功能特性 • 使用文档 • 常见问题

🌟 为什么选择这个工具？

开发 Chrome 扩展时，你是否遇到过这些麻烦：

❌ 需要手动搜索和下载图标
❌ 需要用 Photoshop/Sketch 调整 4 种不同尺寸
❌ 需要手动编辑 manifest.json 配置
❌ 图标格式不符合 Chrome 要求

现在，一行命令搞定一切！ ✨

node skill/scripts/generate-icons.js generate --icon "mdi:calendar" --output "./icons"

✅ 自动搜索最佳图标 ✅ 自动生成 4 种尺寸 PNG ✅ 自动更新 manifest.json ✅ 仅需 3 秒完成全部流程

✨ 功能特性

🔍 海量图标库

从 Iconify 的 275,000+ 免费开源图标中搜索，涵盖：

Material Design Icons (7,000+)
Font Awesome (2,000+)
Heroicons, Lucide, Carbon...
200+ 图标集合

🎨 一键生成

自动生成 Chrome 要求的全部尺寸：

16x16 - Favicon、工具栏图标
32x32 - Windows 任务栏
48x48 - 扩展管理页面 ⭐ 必需
128x128 - Web Store 展示 ⭐ 必需

🌈 颜色定制

轻松应用品牌色：

--color "#ba3329"

将图标转换为你的品牌配色

📁 本地转换

已有 logo？直接转换：

--input "./my-logo.svg"

将你的 SVG logo 转换为标准格式

📦 批量处理

一次处理多个项目：

{
  "projects": [
    { "icon": "mdi:calendar", ... },
    { "icon": "mdi:music", ... }
  ]
}

⚡ 极速性能

搜索：< 1 秒
生成：< 3 秒
文件：仅 3-4 KB
成功率：100%

🚀 快速开始

方式一：作为 Claude Code Skill 使用 ⭐ 推荐

如果你使用 Claude Code，可以将本工具安装为 Skill，通过自然语言对话使用。

📦 安装 Skill

步骤 1：克隆仓库

git clone https://github.com/Boulea7/ChromeExtensionIconsSkill.git
cd ChromeExtensionIconsSkill

步骤 2：部署 Skill

选择以下任一方式：

选项 A：个人 Skill（仅你自己使用）

# 创建个人 Skill 目录
mkdir -p ~/.claude/skills/chrome-extension-icons

# 复制 Skill 文件
cp -r skill/* ~/.claude/skills/chrome-extension-icons/

# 安装依赖
cd ~/.claude/skills/chrome-extension-icons
npm install

验证安装：

ls ~/.claude/skills/chrome-extension-icons/SKILL.md
# 应显示：SKILL.md 文件路径

选项 B：符号链接（推荐开发者）

# 使用符号链接，便于后续更新
ln -s "$(pwd)/skill" ~/.claude/skills/chrome-extension-icons

# 安装依赖
cd ~/.claude/skills/chrome-extension-icons
npm install

优点：修改源代码后无需重新复制

选项 C：项目 Skill（团队共享）

如果你想让团队成员也能使用：

# 在你的扩展项目根目录
mkdir -p .claude/skills/chrome-extension-icons
cp -r /path/to/ChromeExtensionIconsSkill/skill/* .claude/skills/chrome-extension-icons/

# 提交到 Git
git add .claude/skills/
git commit -m "Add chrome-extension-icons Skill"
git push

# 团队成员 pull 后自动可用

步骤 3：验证 Skill 可用

在 Claude Code 中询问：

我需要为 Chrome 扩展生成一个日历图标

Claude 应该自动使用此 Skill 帮你搜索、生成图标。

🎯 如何使用 Skill

完全自然语言交互，无需记忆命令：

"我想为我的书签管理扩展添加一个书签图标"
"生成一个音乐图标，颜色用 #ba3329"
"帮我把 company-logo.svg 转换成 Chrome 扩展图标"
"我有 3 个扩展项目需要批量生成图标"

Claude 会自动：

🔍 搜索相关图标
📋 展示最佳匹配和预览链接
💬 询问你的确认
🎨 生成 4 种尺寸的 PNG
📝 更新 manifest.json
✅ 报告完成情况和备选方案

⚙️ Skill 触发条件

Skill 会在以下情况自动激活：

提到 "extension icon"（扩展图标）
提到 "browser extension icon"（浏览器扩展图标）
提到 "chrome icon"（Chrome 图标）
提到 "add icon to extension"（为扩展添加图标）
提到 "manifest.json icon setup"（manifest 图标配置）

🔧 系统要求

Claude Code - 下载安装
Node.js >= 18.17.0
Sharp 依赖：部分系统需要先安装 libvips

Sharp 安装问题？点击查看解决方案

macOS:

brew install vips
cd ~/.claude/skills/chrome-extension-icons && npm install

Ubuntu/Debian:

sudo apt-get install libvips-dev
cd ~/.claude/skills/chrome-extension-icons && npm install

Windows:

npm install --global windows-build-tools
cd ~/.claude/skills/chrome-extension-icons && npm install

方式二：直接使用命令行工具

如果你不使用 Claude Code，也可以直接运行脚本。

📦 安装

# 1. 克隆仓库
git clone https://github.com/Boulea7/ChromeExtensionIconsSkill.git
cd ChromeExtensionIconsSkill

# 2. 安装依赖
npm install

# 3. 测试运行
node skill/scripts/generate-icons.js search "star"

🎯 基础用法

1. 搜索图标

node skill/scripts/generate-icons.js search "calendar"

返回匹配的图标列表和预览链接。

2. 生成图标

node skill/scripts/generate-icons.js generate \
  --icon "mdi:calendar" \
  --output "./icons" \
  --manifest "./manifest.json"

自动生成 4 个尺寸并更新配置。

3. 自定义颜色

node skill/scripts/generate-icons.js generate \
  --icon "mdi:home" \
  --color "#ba3329"

4. 转换本地 SVG

node skill/scripts/generate-icons.js convert \
  --input "./my-logo.svg" \
  --output "./icons"

5. 批量处理

创建 batch-config.json：

{
  "projects": [
    {
      "name": "项目A",
      "icon": "mdi:calendar",
      "output": "./projectA/icons",
      "manifest": "./projectA/manifest.json"
    }
  ]
}

运行：

node skill/scripts/generate-icons.js batch --config batch-config.json

📸 效果演示

搜索图标

$ node skill/scripts/generate-icons.js search "calendar"

🔍 搜索 "calendar"...
✨ 找到 32 个图标：

1. mdi:calendar
   预览: https://icon-sets.iconify.design/mdi/icons/calendar.html

2. mdi:calendar-outline
   预览: https://icon-sets.iconify.design/mdi/icons/calendar-outline.html

3. material-symbols:calendar
   预览: https://icon-sets.iconify.design/material-symbols/icons/calendar.html

💡 最佳匹配: mdi:calendar

生成图标

$ node skill/scripts/generate-icons.js generate --icon "mdi:calendar" --output "./icons"

⬇️  下载: mdi:calendar
✓ 已下载 240 bytes
🔄 转换为 PNG...
✓ 已生成 16x16: icons/icon16.png (0.2 KB)
✓ 已生成 32x32: icons/icon32.png (0.2 KB)
✓ 已生成 48x48: icons/icon48.png (0.3 KB)
✓ 已生成 128x128: icons/icon128.png (0.6 KB)
📝 更新 manifest.json...
✓ 已创建: ./manifest.json

✅ 图标生成完成！
   已生成 4 个 PNG 文件
   总大小: 1.3 KB

自动更新 manifest.json

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

📖 使用文档

命令参数详解

search - 搜索图标

node skill/scripts/generate-icons.js search <关键词>

示例:

node skill/scripts/generate-icons.js search "music"
node skill/scripts/generate-icons.js search "settings"
node skill/scripts/generate-icons.js search "bookmark"

匹配图标列表（最多 20 个）
每个图标的预览链接
最佳匹配建议

generate - 生成图标（从 Iconify）

node skill/scripts/generate-icons.js generate [选项]

必需参数:

--icon <id> - Iconify 图标 ID（格式：prefix:name，如 mdi:home）

可选参数:

--output <目录> - 输出目录（默认：./icons）
--manifest <路径> - manifest.json 路径（默认：./manifest.json）
--color <颜色> - Hex 颜色（如：#ff0000）
--sizes <尺寸> - 自定义尺寸（如：16,32,48,128,256）

示例:

# 基础使用
node skill/scripts/generate-icons.js generate --icon "mdi:home"

# 自定义颜色
node skill/scripts/generate-icons.js generate --icon "mdi:star" --color "#ba3329"

# 自定义尺寸和路径
node skill/scripts/generate-icons.js generate \
  --icon "mdi:music" \
  --output "./assets/icons" \
  --manifest "./src/manifest.json" \
  --sizes "16,24,32,48,128"

convert - 转换本地 SVG

node skill/scripts/generate-icons.js convert [选项]

必需参数:

--input <文件> - 本地 SVG 文件路径

可选参数:

--output <目录> - 输出目录（默认：./icons）
--manifest <路径> - manifest.json 路径
--color <颜色> - 应用颜色（会替换 SVG 中的填充色）
--sizes <尺寸> - 自定义尺寸

示例:

# 转换公司 logo
node skill/scripts/generate-icons.js convert \
  --input "./company-logo.svg" \
  --output "./icons"

# 转换并改色
node skill/scripts/generate-icons.js convert \
  --input "./logo.svg" \
  --output "./icons" \
  --color "#2563eb"

batch - 批量处理

node skill/scripts/generate-icons.js batch --config <配置文件>

配置文件格式:

{
  "projects": [
    {
      "name": "日历扩展",
      "icon": "mdi:calendar",
      "output": "./project-calendar/icons",
      "manifest": "./project-calendar/manifest.json"
    },
    {
      "name": "音乐扩展",
      "icon": "mdi:music",
      "output": "./project-music/icons",
      "manifest": "./project-music/manifest.json",
      "color": "#ff0000"
    },
    {
      "name": "本地 Logo",
      "input": "./my-logo.svg",
      "output": "./project-logo/icons",
      "manifest": "./project-logo/manifest.json"
    }
  ]
}

示例:

node skill/scripts/generate-icons.js batch --config batch-config.json

🎯 使用示例

场景 1: 新项目快速开始

# 搜索合适的图标
node skill/scripts/generate-icons.js search "bookmark"

# 选择 mdi:bookmark 并生成
node skill/scripts/generate-icons.js generate \
  --icon "mdi:bookmark" \
  --output "./icons" \
  --manifest "./manifest.json"

结果:

✅ 生成 4 个 PNG 文件
✅ 创建 manifest.json（如果不存在）
✅ 配置正确的图标路径

场景 2: 使用品牌色

# 生成红色的心形图标
node skill/scripts/generate-icons.js generate \
  --icon "mdi:heart" \
  --color "#e11d48" \
  --output "./icons"

适用于: 单色 SVG 图标效果: 所有填充色替换为指定颜色

场景 3: 转换公司 Logo

# 将公司的 logo.svg 转换为 Chrome 格式
node skill/scripts/generate-icons.js convert \
  --input "./assets/company-logo.svg" \
  --output "./extension/icons" \
  --manifest "./extension/manifest.json"

场景 4: 管理多个扩展项目

# 创建批量配置
cat > my-extensions.json << 'EOF'
{
  "projects": [
    {
      "name": "待办事项扩展",
      "icon": "mdi:checkbox-marked",
      "output": "./todo-extension/icons",
      "manifest": "./todo-extension/manifest.json"
    },
    {
      "name": "书签管理器",
      "icon": "mdi:bookmark-multiple",
      "output": "./bookmark-manager/icons",
      "manifest": "./bookmark-manager/manifest.json",
      "color": "#3b82f6"
    },
    {
      "name": "密码管理器",
      "icon": "mdi:shield-key",
      "output": "./password-manager/icons",
      "manifest": "./password-manager/manifest.json",
      "color": "#10b981"
    }
  ]
}
EOF

# 一次性生成全部
node skill/scripts/generate-icons.js batch --config my-extensions.json

📊 性能表现

指标	数值	评级
🔍 搜索速度	0.8-1.2 秒	⚡️ 优秀
🎨 单图标生成	1.5-2.5 秒	⚡️ 优秀
📦 批量 4 项目	~2.3 秒	🚀 极优
💾 16x16 文件	~300 字节	💎 完美
💾 128x128 文件	~1.5 KB	💎 完美
📦 4 个图标总大小	3-4 KB	💎 完美

🛠️ Chrome Extension 图标要求

Chrome 扩展对图标有严格要求，本工具自动满足所有规范：

尺寸	用途	是否必需	生成文件
16x16	Favicon、工具栏	推荐	✅ icon16.png
32x32	Windows 任务栏	推荐	✅ icon32.png
48x48	扩展管理页面	必需	✅ icon48.png
128x128	Web Store、安装对话框	必需	✅ icon128.png

格式要求:

✅ PNG 格式（唯一支持的格式）
✅ 透明背景支持
❌ SVG 不支持（Chrome 限制）

manifest.json 配置:

本工具自动生成正确的配置：

{
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}

💡 使用技巧

✅ 推荐做法

先预览再生成: 使用 search 命令查看图标样式，点击预览链接确认
选择简单图标: 扁平化设计在小尺寸（16x16）下显示更清晰
使用品牌色: 单色图标配合 --color 参数效果最佳
批量处理: 多个项目用 batch 模式节省时间
保持文件小: 生成的 PNG 总大小应 < 100 KB

⚠️ 注意事项

复杂 SVG 可能失真: 包含渐变、滤镜的图标建议选择其他简单风格
颜色功能限制: 只能替换纯色填充，不影响渐变和图案
文件路径: manifest.json 中使用相对路径，确保正确性

🔧 常见问题

Q: Sharp 安装失败怎么办？

Sharp 依赖 libvips 图像处理库，部分系统需要手动安装：

macOS:

brew install vips
cd skill && npm install

Ubuntu/Debian:

sudo apt-get install libvips-dev
cd skill && npm install

Windows: 通常会自动安装。如果失败：

npm install --global windows-build-tools
cd skill && npm install

Q: Claude Code 没有使用我的 Skill？

原因 1：Skill 未正确安装

验证方法：

ls ~/.claude/skills/chrome-extension-icons/SKILL.md

原因 2：触发短语不匹配

确保你的描述包含关键词：

"扩展图标" 或 "extension icon"
"Chrome 图标" 或 "chrome icon"
"浏览器扩展" 或 "browser extension"

原因 3：依赖未安装

cd ~/.claude/skills/chrome-extension-icons
npm install

Q: API 请求失败或超时？

原因: 网络问题或 Iconify API 暂时不可用

解决方案:

脚本会自动重试 3 次
检查网络连接
等待片刻后重试
或使用本地 SVG：convert --input "./logo.svg"

Q: 生成的图标不满意？

方案 1: 尝试其他关键词

# 如果 "calendar" 结果不理想
node skill/scripts/generate-icons.js search "schedule"
node skill/scripts/generate-icons.js search "date"

方案 2: 选择不同的图标集

Material Design: mdi:*
Font Awesome: fa:*
Heroicons: heroicons:*
Carbon: carbon:*
Lucide: lucide:*

方案 3: 使用自己的 SVG

node skill/scripts/generate-icons.js convert --input "./my-design.svg"

Q: 如何自定义图标颜色？

# 使用 --color 参数，支持 3 位或 6 位 Hex 颜色
node skill/scripts/generate-icons.js generate \
  --icon "mdi:home" \
  --color "#ba3329"   # 6 位完整格式

# 或简写
  --color "#f00"      # 3 位简写

注意: 颜色功能最适合单色 SVG。复杂图标（多色、渐变）可能效果不佳。

Q: 可以生成其他尺寸吗？

可以！使用 --sizes 参数：

node skill/scripts/generate-icons.js generate \
  --icon "mdi:star" \
  --sizes "16,24,32,48,64,128,256"

常用尺寸:

Chrome 标准: 16, 32, 48, 128
高清显示: 24, 64, 256
自定义: 任何 1-1024 之间的尺寸

Q: 批量处理如何配置？

创建 JSON 配置文件，每个项目可以：

使用 Iconify 图标（icon 字段）
或转换本地 SVG（input 字段）
自定义颜色、尺寸、路径

{
  "projects": [
    {
      "name": "项目 A",
      "icon": "mdi:calendar",
      "output": "./projectA/icons",
      "manifest": "./projectA/manifest.json"
    },
    {
      "name": "项目 B",
      "input": "./logo-b.svg",
      "output": "./projectB/icons",
      "manifest": "./projectB/manifest.json",
      "color": "#ff0000",
      "sizes": [16, 32, 48, 128, 256]
    }
  ]
}

📂 项目结构

ChromeExtensionIconsSkill/
├── 📄 README.md                       # 本文档（中文）
├── 📄 README_EN.md                    # 英文文档
├── 📄 LICENSE                         # MIT 许可证
├── 📦 package.json                    # 项目配置
├── 🎯 skill/                          # 核心代码目录
│   ├── 📄 SKILL.md                   # Claude Code Skill 定义
│   ├── 📦 package.json               # 依赖配置
│   ├── 📁 scripts/
│   │   └── 💻 generate-icons.js      # 主脚本（~400 行）
│   └── 📁 examples/
│       └── 📄 usage.md               # 详细使用示例（10 个场景）
└── 🔌 plugin/                         # 插件打包目录
    ├── 📦 package.json
    └── 📁 .claude-plugin/
        ├── 📄 plugin.json            # 插件元数据
        └── 📁 skills/                # Skill 符号链接

🤝 贡献指南

我们欢迎所有形式的贡献！

如何贡献

Fork 本仓库
创建功能分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启 Pull Request

贡献方向

🐛 报告 Bug
💡 提出新功能建议
📝 改进文档
🎨 优化代码
🌍 翻译文档

代码规范

使用清晰的变量命名
添加必要的注释（英文）
遵循现有代码风格

📄 许可证

本项目采用 MIT 许可证 - 详见 LICENSE 文件

这意味着你可以：

✅ 自由使用、修改、分发
✅ 用于商业项目
✅ 二次开发
⚠️ 需保留原作者版权声明

🙏 致谢

技术支持

Iconify - 提供 275,000+ 免费开源图标
Sharp - 高性能 Node.js 图像处理库
Chrome Extension 文档 - 官方开发指南

社区支持

感谢所有 Star、Fork 和贡献代码的开发者们！❤️

📞 联系方式

🐛 报告 Bug: 提交 Issue
💬 功能建议: 开启 Discussion
📧 其他咨询: 通过 GitHub Issues 联系

🔗 相关资源

官方文档

图标资源

Iconify 图标库 - 275,000+ 免费图标
Material Design Icons - 7,000+ 图标
Heroicons - 精美的手工制作图标
Lucide Icons - 美观的开源图标

开发工具

Sharp 文档 - 图像处理库
Chrome Web Store - 扩展发布平台

📈 路线图

v1.0.0 ✅ 当前版本

✅ 基础搜索和生成功能
✅ 自定义颜色支持
✅ 本地 SVG 转换
✅ 批量处理
✅ 自动 manifest 更新
✅ Claude Code Skill 集成

v1.1.0 🔄 计划中

⏳ 懒加载 Sharp（优化启动速度）
⏳ 改进错误处理和重试逻辑
⏳ 支持 browser_action 和 page_action
⏳ 增强输入校验
⏳ 添加图标预览功能

v2.0.0 💭 未来展望

💭 Web 界面
💭 图标编辑功能
💭 支持更多图标源
💭 CI/CD 集成
💭 VSCode 扩展

🌟 Star History

如果这个项目对你有帮助，请给个 ⭐ Star 支持一下！

Made with ❤️ for Chrome Extension Developers

如果这个工具帮到了你，别忘了给个 ⭐ Star！

⬆️ 回到顶部