如何使用UnoCSS的纯CSS图标方案替代字体图标库-css教程-PHP中文网

UnoCSS的preset-icons通过类名直接渲染SVG图标，不依赖字体、无加载延迟、颜色大小由CSS控制；需安装对应JSON图标包（如@iconify-json/mdi），配置presetIcons并传入选项对象，类名格式为i-图标集-图标名（如i-mdi-home），大小写敏感且需匹配Iconify官网名称。

如何使用unocss的纯css图标方案替代字体图标库

UnoCSS 的 preset-icons 能直接用类名渲染 SVG 图标，不依赖字体文件、无跨域/加载延迟、颜色大小随 CSS 控制——它不是“另一种图标字体”，而是把 SVG 当作一等公民塞进原子化系统里。

安装图标集并启用 preset-icons

UnoCSS 本身不带图标数据，必须显式安装对应图标集的 JSON 包。比如要用 Material Design Icons，就装 @iconify-json/mdi；要用 Carbon，就装 @iconify-json/carbon。注意：只装 JSON 包，不装 JS 渲染器或字体文件。

运行 pnpm add -D @iconify-json/mdi（或你选的图标集）
在 uno.config.ts 中引入并配置 presetIcons，不能只写 presetIcons()，必须传入选项对象，否则图标不会被识别
确保 presets 数组里同时有 presetUno()（或其他基础预设），否则 i-xxx 类名无法触发解析

类名格式与常见错误

图标类名固定为 i-图标集-图标名，比如 i-mdi-home、i-carbon-sun。大小写敏感，且图标名必须和 Iconify 官网查到的完全一致（如 mdi:home → i-mdi-home，中间是短横线，不是冒号）。

写成 i-mdi:home 或 i-MDI-home 都不会生效，控制台也无报错，图标直接空白
图标名含连字符（如 arrow-left）时，类名就是 i-mdi-arrow-left，无需转义或驼峰
如果用了 extraProperties 配置但没加 display: inline-block，图标可能塌陷成一条线——这是最常被忽略的显示问题

按需打包与 Tree-shaking 生效条件

UnoCSS 默认只生成你实际在模板中写的 i-xxx 类对应的 SVG Data URI，但这个行为不是自动的，依赖两个硬性条件：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

include 配置必须覆盖你写类名的文件（如 /\.vue$/、/\.tsx?$/），否则扫描不到类名，所有图标都会被丢弃
exclude 必须排除 node_modules，否则构建会卡住或体积暴增——尤其当你项目里有其他依赖也用了 iconify 时
动态拼接类名（如 :class="`i-${iconName}`"）无法被静态分析，这类图标不会进入打包，得手动在 extend 或 icons 选项里声明

本地 SVG 图标如何接入

UnoCSS 支持直接引用本地 .svg 文件，但路径必须是相对于项目根目录的绝对路径（以 / 开头），且文件需在构建时可访问（不能放在 public/ 下，得放 src/assets/icons/ 这类会被打包处理的目录）。

写法是 i-[~icons/heart]，其中 [~icons/heart] 是路径别名，需在 uno.config.ts 的 theme.paths 或 Vite 的 resolve.alias 中提前定义
本地 SVG 不支持自动 color / size 变换，因为它是作为 background-image 插入的，只能靠 background-size 和 color（对 fill 属性无效）间接控制
如果 SVG 内联了 fill="currentColor"，那配合 color 类（如 c-red）就能变色；否则得用 filter: invert() 等 hack 方式