从 uno.config.ts 把握 UnoCSS 图标的脉络

先说一句，聊 UnoCSS 我们得先把心态放轻松。

别想一次性把所有概念塞进脑子，慢慢来。

今天咱们就从项目根目录的 uno.config.ts 出发，拆解一下图标是怎么配置的。

先抛出一个常见的疑问：为什么百度不收录？

答案hen简单，百度爬虫geng喜欢传统的静态资源链接，对 CSS 背景中的 SVG 识别度低。

所以Ru果你想让搜索引擎kan到图标，Zui好配合 或者使用可访问的 alt 文本。

回到正题，打开你的 uno.config.ts，Zui核心的几行大概长这样：

presetIcons, // 按需安装 @iconify-json/carbon 等 }, // 或 scale: , warn: true 等选项})

这段代码其实是 UnoCSS 的「图标预设」入口。

它告诉 UnoCSS：我要用哪些图标集合，我要怎么加载它们。

下面一步步拆开kankan。

collections 是一个对象。

键名代表「命名空间」，键值是一个函数或对象返回 Iconify 集合。

custom 是我们自己起的名字，一般对应本地 SVG 文件夹。

Ru果你想直接引用 Carbon、Material Design 那些官方库，只需要在这里加一行：

import { presetIcons } from 'unocss'
presetIcons({
  collections: {
    carbon:  => import,
    custom: loadCustomIconSet,
  },
})

这样一来你既Neng用 i-carbon-user

也Neng用自家前缀 i-custom-*

两套图标并存，是有意为之——业务定制走 custom,通用图标走官方集合。

import { importDirectorySync, runSVGO, deOptimisePaths } from '@iconify/tools'
import fs from 'fs'
const customIconPrefix = 'custom'
const customIconSvgDir = 'src/assets/svg'
const loadCustomIconSet =  => {
  const iconSet = importDirectorySync(customIconSvgDir, {
    prefix: customIconPrefix,
  })
  iconSet.forEachSync => {
    const svg = iconSet.toSVG!
    runSVGO
    deOptimisePaths
    iconSet.fromSVG
  })
  if  {
    const iconSetContent = iconSet.export
    fs.writeFile)
  }
  return  => iconSet.export
}

这里面干了几件事：

importDirectorySync: 把整个 目录读进来每个文件变成 Iconify 条目。

extraProperties: {
  display: 'inline-block',
  'vertical-align': 'middle',
}

搜索
h

.i-custom-check-circle-filled {
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask: url no-repeat center / contain;
}

import { defineConfig, presetWind3, presetIcons } from 'unocss'
import { loadCustomIconSet } from './scripts/load-icons'
export default defineConfig({
  presets: ,
})