Pixel ICON - 像素图标绘制

About this plugin

Pixel ICON 是一款像素图标编辑器，专为设计师和开发者创建像素风格图标而设计，提供直观界面和丰富工具，轻松实现图标创建、编辑和导出。

核心功能

- 绘制工具 ：铅笔（绘制）、橡皮擦（擦除）、选择工具（移动像素区域）

- 画布控制 ：8-64像素尺寸调整、网格系统、右侧实时SVG预览

- 颜色管理 ：颜色选择器、单色模式、颜色取色器（Alt键）

- 导出功能 ：复制SVG到剪贴板、导出到Figma、自定义图标命名

快捷键

- P：切换铅笔工具

- E：切换橡皮擦工具

- M：切换选择工具

- Alt：启用取色模式

- 鼠标右键：切换当前工具

- Delete/Backspace：删除选择区域

使用指南

1. 打开应用默认创建12x12像素画布

2. 选择工具（铅笔/橡皮擦/选择）

3. 调整画布尺寸

4. 选择颜色开始绘制

5. 使用选择工具移动像素，橡皮擦修改

6. 点击"SVG"复制或"Export"导出到Figma

Pixel ICON Introduction

Pixel ICON is a pixel icon editor designed for creating pixel-style icons. It offers an intuitive interface and comprehensive tools for easy icon creation, editing, and export.

Core Features

- Drawing Tools ：Pencil (draw), Eraser (erase), Select (move pixel regions)

- Canvas Control ：8-64 pixel size adjustment, grid system, real-time SVG preview

- Color Management ：Color picker, monochrome mode, color sampler (Alt key)

- Export Options ：Copy SVG to clipboard, export to Figma, custom icon naming

Keyboard Shortcuts

- P: Switch to Pencil tool

- E: Switch to Eraser tool

- M: Switch to Select tool

- Alt: Enable color picker mode

- Right mouse button: Toggle current tool

- Delete/Backspace: Delete selected area

User Guide

1. Open the app (default 12x12 pixel canvas)

2. Select tool (Pencil/Eraser/Select)

3. Adjust canvas size

4. Choose color and start drawing

5. Use Select tool to move pixels, Eraser to modify

6. Click "SVG" to copy or "Export" to send to Figma

Technical Implementation

Featuring optimized SVG path generation, responsive layout, and React Hooks for state management. Ideal for creating small icons, game assets, or minimalist UI elements with an intuitive interface that makes pixel icon design simple and efficient.