unocss的preset-icons预设支持纯css渲染svg图标：无需组件、不依赖js运行时、不加载字体文件，仅通过类名（如i-ep-edit）即可使用，图标数据来自手动安装的@iconify-json/xxx包，需在uno.config.ts中显式启用preseticons并确保前缀匹配。
能直接用类名渲染 SVG 图标，不需要组件、不走 JS 运行时、不加载字体文件——preset-icons 就是干这个的。
安装对应图标集 JSON 包
UnoCSS 的图标预设本身不带图标数据，它只负责把类名转成内联 SVG 的 CSS 规则。真正提供图标的，是你手动安装的 @iconify-json/xxx 包。
- 比如要用 Element Plus 图标，就装
pnpm add -D @iconify-json/ep - 要用 Carbon，就装
pnpm add -D @iconify-json/carbon - 图标集名必须和类名前缀严格一致：
i-ep-edit→@iconify-json/ep，拼错就找不到图标 - MIT 或 Apache 2.0 协议的图标集更稳妥，避免商用风险
在 uno.config.ts 中启用 presetIcons
光装包不行，得告诉 UnoCSS 去读这些 JSON 文件。配置里漏掉 presetIcons，类名就完全不生效。
- 确保
uno.config.ts导入并注册了预设：import { presetIcons } from 'unocss'，然后在presets: [presetIcons()]里启用 - 如果需要支持深色模式自动切换图标（如白天太阳、晚上月亮），加个
dark:配置：presetIcons({ dark: 'i-carbon-moon' }) - 默认只处理
i-*开头的类名，改前缀要配prefix选项，否则icon-carbon-sun这种写法不会触发解析
直接用 class 渲染，别套组件
这是最容易踩坑的地方：有人装完图标包、配好预设，却还在 Vue 里写 <icon name="ep:edit"></icon> —— 那走的是 unplugin-icons 路线，跟 preset-icons 毫无关系。
- 纯 CSS 图标只认类名：
<button class="i-ep-edit text-xl c-blue"></button> - 颜色用
c-red、大小用text-2xl或size-20，这些都依赖你是否启用了preset-uno或preset-attributify - SVG 是通过
background-image: url(data:image/svg+xml,...)注入的，所以必须保证元素有宽高（display: inline-block+width/height），否则图标不显示 - 调试时右键检查元素，看 computed styles 里有没有
background-image，没有就说明类名没被识别或图标数据没加载
图标类名怎么查？别靠猜
Iconify 官方维护了一个实时同步的图标浏览器，所有已安装的图标集都能搜到，类名格式也一目了然。
- 打开 https://www.php.cn/link/7787981698c0c4b7cdb0824c5f0ed814，左侧选中你装过的图标集（如
ep） - 搜索关键词，比如 “edit”，页面会列出
ep:edit、ep:edit-outline等完整 ID - 转成 UnoCSS 类名时，把冒号换成短横线：
ep:edit→i-ep-edit；mdi:account→i-mdi-account - 注意大小写：Iconify ID 是小写的，
i-Mdi-Account这种写法无效
最常被忽略的一点：图标类名生效的前提是，该图标 ID 确实存在于你安装的 JSON 包里。删掉 node_modules/@iconify-json/ep 后没重装，或者装的是旧版（不含新图标），都会导致类名静默失败——它不会报错，只是啥也不渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
