UnoCSS中使用JSON图标集合的常见问题解析

问题背景

在使用UnoCSS的图标预设功能时，开发者经常会遇到JSON图标集合导入失败的问题。特别是在项目中使用@iconify-json提供的图标集合时，可能会遇到模块导入错误或类型声明问题。

典型错误表现

1. TypeScript编译错误：提示找不到JSON模块，建议添加--resolveJsonModule选项
2. 运行时错误：Node.js抛出ERR_IMPORT_ATTRIBUTE_MISSING错误，提示需要JSON类型声明
3. 图标不显示：虽然编译通过，但实际图标无法正确渲染

解决方案

正确配置图标集合

在UnoCSS配置中，图标集合应该直接定义在collections属性下，而不是嵌套在另一个collections对象中。这是常见的配置错误。

// 正确配置示例
export default defineConfig({
  presets: [
    presetIcons({
      collections: {
        ms: () => 
          import('@iconify-json/material-symbols/icons.json')
            .then(i => i.default)
      }
    })
  ]
})

TypeScript配置调整

确保tsconfig.json中包含必要的编译选项：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

处理PNPM工作区问题

在使用PNPM工作区时，需要注意：

1. 确保所有相关依赖都正确安装
2. 检查工作区包之间的依赖关系
3. 考虑使用明确的版本声明而非workspace:*

版本兼容性说明

虽然问题在65.5.0版本被报告，但类似问题在65.4.3版本也可能出现。建议：

1. 检查UnoCSS和@iconify-json的版本兼容性
2. 考虑锁定特定版本以避免意外行为
3. 关注官方更新日志中的破坏性变更

最佳实践建议

1. 图标别名预设：可以创建专门的预设来处理图标别名
2. 安全列表：将常用图标添加到安全列表确保编译
3. 错误处理：为动态导入添加错误处理逻辑
4. 类型声明：为自定义图标提供完整的类型支持

通过以上方法，可以有效地解决UnoCSS中JSON图标集合的导入和使用问题，确保图标系统稳定运行。