SVG 图标预览管理插件

一个专为前端开发者打造的 VS Code 扩展，提供智能化的 SVG 图标管理和预览功能。

🚀 技术特色

核心技术栈

• VS Code Extension API - 深度集成编辑器生态
• TypeScript - 类型安全的开发体验
• Node.js File System - 高效的文件系统操作
• WebView API - 原生 Web 技术渲染图标预览
• Tree View Provider - 自定义侧边栏视图

技术亮点

1. 智能路径解析

• 支持多包架构项目（Monorepo）
• 动态解析相对路径和绝对路径
• 自动识别当前工作目录的图标配置

2. 实时文件监听

• 基于 fs.watch 实现图标文件变化监听
• 自动更新图标列表，无需手动刷新
• 智能检测文件增删改操作

3. AST 语法分析

• 解析 TypeScript/JavaScript 文件中的图标导入
• 识别未使用的图标资源（红色标记）
• 支持多种导入语法格式

4. 高性能渲染

• SVG 内容缓存机制
• 按需加载图标预览
• 虚拟滚动优化大量图标展示

🎯 解决的核心问题

1. 图标管理混乱

问题：大型项目中图标散落各处，难以统一管理和查找 解决方案：集中化配置，统一入口管理所有图标资源

2. 重复图标引入

问题：开发者不清楚已有图标，容易重复添加相似图标 解决方案：可视化预览，一目了然查看所有可用图标

3. 死代码检测困难

问题：无法快速识别哪些图标文件已不再使用 解决方案：静态分析代码引用关系，标记未使用图标

4. 开发效率低下

问题：频繁切换文件查看图标，复制粘贴代码繁琐 解决方案：一键复制图标代码，右键菜单快速操作

📦 技术架构

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   配置解析器     │    │   文件监听器      │    │   AST 分析器    │
│ ConfigParser    │────│  FileWatcher     │────│  ASTAnalyzer    │
└─────────────────┘    └──────────────────┘    └─────────────────┘
         │                        │                       │
         └────────────────────────┼───────────────────────┘
                                  │
                   ┌──────────────▼──────────────┐
                   │        核心控制器            │
                   │     IconController         │
                   └──────────────┬──────────────┘
                                  │
         ┌────────────────────────┼────────────────────────┐
         │                       │                        │
┌────────▼────────┐    ┌─────────▼────────┐    ┌─────────▼────────┐
│   TreeView      │    │   WebView        │    │  命令处理器       │
│   Provider      │    │   Provider       │    │ CommandHandler   │
└─────────────────┘    └──────────────────┘    └──────────────────┘

⚙️ 项目配置

在项目 .vscode 目录下创建 iconConfig.json：

[
  {
    "name": "packages/amis-ui",
    "iconPath": "packages/amis-ui/src/components/icons.tsx",
    "iconDir": "packages/amis-ui/src/icons"
  },
  {
    "name": "packages/amis-editor",
    "iconPath": "packages/amis-editor/src/icons/index.tsx",
    "iconDir": "packages/amis-editor/src/icons"
  }
]

配置字段说明

字段	类型	说明
name	string	包名或模块标识
iconPath	string	图标注册文件路径
iconDir	string	SVG 文件存储目录

🔧 主要功能

智能预览

• 📱 侧边栏图标面板
• 🔍 实时搜索过滤
• 🎨 SVG 内容预览
• 📊 使用状态标识

快捷操作

• 📋 一键复制图标代码
• 🗂️ 快速打开源文件
• 🗑️ 安全删除图标资源
• 🔄 增量更新图标列表

开发体验

• ⚡ 零配置启动
• 🔥 热重载支持
• 🎯 上下文感知
• 📝 TypeScript 类型提示

🚀 快速开始

1. 安装插件
2. 配置 iconConfig.json
3. 重启 VS Code
4. 打开侧边栏图标面板

🤝 技术支持

基于现代前端工程化实践，支持主流框架和构建工具：

• React/Vue/Angular 组件
• Webpack/Vite/Rollup 构建
• TypeScript/JavaScript 项目
• Monorepo 多包架构