如何添加新图标

图标库来自 MDI（Pictogrammers），共三步：

第一步：复制 SVG 路径到 src/lib/icons.ts

在 MDI 图标库 搜索并选中图标，复制其 SVG path 代码，在 src/lib/icons.ts 顶部按字母顺序粘贴为导出常量：

ts
12
export const mdiAbTesting =
  'M4 2A2 2 0 0 0 2 4V12H4V8H6V12H8V4A2 2 0 0 0 6 2H4M4 4H6V6H4M22 15.5V14A2 2 0 0 0 20 12H16V22H20A2 2 0 0 0 22 20V18.5A1.54 1.54 0 0 0 20.5 17A1.54 1.54 0 0 0 22 15.5M20 20H18V18H20V20M20 16H18V14H20M5.79 21.61L4.21 20.39L18.21 2.39L19.79 3.61Z'

第二步：注册到 icons 映射表

在同文件底部的 icons 对象中添加条目（key 为 kebab-case 全名）：

ts
1234
export const icons = {
  // ...
  'mdi-ab-testing': mdiAbTesting,
}

第三步：在组件中导入并使用

在 .astro 组件的 frontmatter 里按名导入，然后用 Icon 组件渲染：

astro
123456
---
import Icon from '@/components/Icon.astro'
import { mdiAbTesting } from '@/lib/icons'
---

<Icon d={mdiAbTesting} class="text-sm" />

首页卡片平台图标

在 src\components\ProfileCard.astro 中参考其他图标导入添加即可。

为什么硬编码图标

答：为了做到零网络请求、零依赖、极致的性能，缺点是添加新图标比较麻烦。