unplugin-icons项目在SvelteKit中使用?raw参数的问题分析

在unplugin-icons项目的最新版本0.17.4中，开发者发现了一个影响SvelteKit应用的严重问题。当尝试使用?raw参数导入图标时，系统会抛出语法解析错误，导致应用无法正常运行。

问题现象

当开发者在SvelteKit项目中尝试以下导入方式时：

import RawMdiAlarmOff from 'virtual:icons/mdi/alarm-off?raw&width=4em&height=4em'

系统会报错提示"Failed to parse source for import analysis because the content contains invalid JS syntax"。这个问题从0.17.4版本开始出现，之前的版本则工作正常。

根本原因

经过深入分析，发现问题出在查询参数的处理逻辑上。在解析过程中，系统错误地处理了查询字符串，导致了双重问号??的出现。具体表现为：

1. 原始ID被错误解析为~icons/mdi/alarm-off??raw&width=4em&height=4em
2. 规范化后的ID变为/~icons/mdi/alarm-off??raw&width=4em&height=4em
3. 最终解析结果为~icons/mdi/alarm-off???raw&width=4em&height=4em

这种错误的参数处理方式导致生成的SVG组件包含了不合法的语法结构，进而触发了Vite的解析错误。

影响范围

该问题主要影响：

• 使用SvelteKit框架的项目
• 需要以原始(raw)格式导入图标的场景
• 同时使用宽度和高度参数的图标导入

临时解决方案

在官方修复发布前，开发者可以采取以下临时措施：

1. 避免使用?raw参数导入图标
2. 回退到0.17.3版本
3. 使用常规方式导入图标，不使用原始格式

技术启示

这个问题提醒我们，在处理虚拟模块和查询参数时需要特别注意：

1. 查询字符串的解析必须严格遵循规范
2. 参数处理逻辑需要考虑各种边界情况
3. 虚拟模块的实现需要与构建工具(Vite)的解析机制良好配合

对于插件开发者而言，这也是一次宝贵的经验教训：在修改核心参数处理逻辑时，需要增加充分的测试用例，确保不会破坏现有功能。