UnoCSS运行时模式下presetIcons的注意事项

在使用UnoCSS的runtime模式时，开发者可能会遇到一个常见问题：当仅配置了presetIcons预设时，其他基础样式类（如mx-auto、text-2xl等）会失效。这是因为UnoCSS的设计机制导致的。

问题现象

当开发者按照官方文档示例，仅引入presetIcons预设时，会发现图标类（如i-ph-anchor-simple-thin）能够正常显示，但其他常规的UnoCSS工具类却无法生效。这是因为presetIcons预设只负责处理图标相关的功能，并不包含基础的CSS工具类规则。

解决方案

要解决这个问题，需要同时引入基础预设。UnoCSS提供了两种主要的基础预设选择：

1. Uno预设：这是UnoCSS的默认预设，包含了常用的工具类
2. Wind预设：Tailwind CSS的兼容实现

在runtime模式下，正确的做法是同时引入基础预设和icons预设。例如：

<script>
window.__unocss = {
  presets: [
    window.__unocss_runtime.presets.presetUno(), // 或 presetWind
    window.__unocss_runtime.presets.presetIcons({
      scale: 1.2,
      cdn: 'https://esm.sh/'
    }),
  ],
}
</script>

实现原理

UnoCSS的runtime模式通过动态生成CSS规则来工作。每个预设都是独立的模块，只处理自己负责的那部分类名：

• 基础预设（Uno/Wind）处理常规的工具类
• Icons预设专门处理图标类名

当只配置icons预设时，系统自然无法识别其他类名，因为它们不在icons预设的处理范围内。

最佳实践

对于大多数项目，建议同时使用基础预设和icons预设。如果确实只需要图标功能，可以考虑：

1. 使用专门的图标解决方案
2. 自定义UnoCSS配置，仅包含需要的规则
3. 评估是否真的需要runtime模式，也许构建时模式更适合

记住，UnoCSS的模块化设计让开发者可以按需选择功能，但也需要理解各预设的职责范围，才能正确配置。