动态图标类名未生成css需在safelist中显式声明，如'i-carbon-favorite'；vscode提示需配置"editor.quicksuggestions":{"strings":true}和"unocss.triggercharacters":["-"," :", "[", "]", "("]；小程序端须设mode: 'per-module'并禁用cdn。
动态绑定的图标类名没生成 CSS
UnoCSS 默认只扫描模板字符串、HTML 属性值里的字面量类名，class="[group.icon]" 这种写法中，group.icon 是运行时变量，即使它实际是字符串（如 'i-carbon-favorite'），静态扫描器也会跳过。构建后 CSS 里找不到对应规则，图标自然不显示。
解决方法是在 uno.config.ts 中用 safelist 显式声明这些类名：
export default defineConfig({
presets: [
presetIcons({
cdn: false,
collections: {
carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
},
}),
],
safelist: [
'i-carbon-favorite',
'i-carbon-image-search',
'i-carbon-crop',
// 其他所有可能出现在动态绑定中的图标类
],
})
-
safelist是强制“保底”生成 CSS 的开关，不是可选优化项 - 如果图标来自多个集合（比如
carbon和mdi），每个集合里用到的动态类都要列全 - 避免写通配符（如
'i-carbon-*'），UnoCSS 的safelist不支持 glob 匹配
VSCode 里输不出图标类名提示
图标类名基本都长这样：i-carbon-logo-github，含大量连字符和冒号。VSCode 默认不触发字符串内的补全，且 UnoCSS 插件依赖特定字符激活上下文。
必须在 settings.json 中同时配置两项：
{
"editor.quickSuggestions": {
"strings": true
},
"unocss.triggerCharacters": ["-", ":", "[", "]", "("]
}
- 缺
"strings": true，哪怕配置全对，也完全看不到提示 -
[和]必须加入triggerCharacters，否则hover:[&_span]:text-red这类变体语法无法触发 - 改完设置要重启整个 VSCode 窗口，重载窗口无效
小程序端图标空白，但 H5 正常
这是典型的平台适配问题：H5 支持全局 uno.css 注入，而小程序要求每个组件样式独立、编译时确定，且不接受运行时注入或虚拟模块。
关键改动是把 UnoCSS 切成 per-module 模式，并确保图标资源走本地加载：
export default defineConfig({
mode: 'per-module', // 必须设为 per-module
presets: [
presetIcons({
cdn: false, // 禁用 CDN，避免小程序请求失败
collections: {
carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
},
}),
],
})
-
mode: 'per-module'让 UnoCSS 为每个.vue文件生成专属.wxss，匹配小程序编译机制 -
cdn: false不只是性能考虑——小程序环境根本发不出跨域 SVG 请求，本地 JSON 是唯一可靠路径 - 确认
@unocss/vite插件已在vite.config.ts中启用，否则per-module模式不会生效
图标 DOM 渲染了但看不见
检查元素是否真有内容：打开浏览器 DevTools → Elements 面板，找到 i-xxx 标签，看里面有没有内联 SVG 或伪元素。
常见静默失效原因：
- CSS 重置覆盖了
font-family: 'icon-font'，导致字体图标回退成方块；查 computed styles 确认font-family是否为图标集声明的值 - 图标类名拼写错误但没报错（比如
i-carbon-log-github少了个o），safelist里漏写了，构建后无对应 CSS 规则 - 使用了
FileSystemIconLoader但路径配置错误，比如./icons/*.svg实际目录是src/assets/icons/，loader 找不到文件就静默跳过
最直接的验证方式：临时把类名从动态改成硬编码，比如 class="i-carbon-favorite"，能显示说明问题出在动态绑定或 safelist 漏配，而不是图标资源本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
