SvgIcon-Preview

一个用于 VS Code 的 SVG 图标预览扩展，支持从 React .tsx 组件中预览 SVG 图标，提供单个预览和批量预览两种模式。

功能特性

• 单个预览：在 .tsx 文件编辑器标题栏点击相机图标，使用 VS Code 原生图像预览器打开 SVG（支持缩放、平移等操作）
• 批量预览：右键点击文件夹，选择"批量预览 SVG"，在深色主题 Webview 中以网格布局展示所有 SVG 图标
• 搜索过滤：批量预览界面提供搜索框，实时过滤图标名称
• 一键复制：点击图标卡片自动复制 <Icon name="..." /> 到剪贴板
• 智能提取：自动解析 React 组件中的 <svg>...</svg> 代码，支持 JSX 语法转换
• 尺寸显示：批量预览时自动显示每个 SVG 的宽高信息
• 刷新功能：批量预览界面顶部提供刷新按钮，实时更新文件夹内容变化
• 临时文件管理：单个预览最多保留 10 个临时文件，自动清理旧文件

使用方法

单个预览

1. 在 VS Code 中打开包含 SVG 组件的 .tsx 文件
2. 点击编辑器标题栏右上角的相机图标
3. VS Code 原生图像预览器将在侧边栏打开 SVG
4. 支持鼠标滚轮缩放、拖拽平移等操作

批量预览

1. 在文件资源管理器中右键点击包含 SVG 组件的文件夹
2. 选择"批量预览 SVG"
3. 新窗口将以网格布局展示所有 SVG 图标，显示名称和尺寸
4. 使用搜索框快速过滤图标（支持模糊搜索）
5. 点击任意图标卡片，自动复制 <Icon name="图标名" /> 到剪贴板
6. 点击顶部刷新按钮可更新内容

示例

const ArrowLeft = () => (
	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M15 18l-6-6 6-6" stroke="currentColor" strokeWidth="2" />
	</svg>
);

插件代码由 Copilot 自动生成

如有任何建议或问题，欢迎提出反馈！