Skip to content

给博客换上 Lucide 图标

之前的首页特性卡片用的是 emoji,风格不够统一,这次统一换成 Lucide 线性图标。

做法

  1. 从 Lucide 官方仓库下载需要的 SVG 到本地 icons/ 目录;
  2. config.mjs 中配置 vite.publicDir 指向该目录,实现本地引用;
  3. 在首页 frontmatter 中用 <img src="/pen-line.svg" /> 替换 emoji。

注意事项

Lucide 的 SVG 使用 stroke="currentColor",以 <img> 方式独立加载时无法继承页面颜色,所以暗色模式下需要做反色处理(filter: invert(1))。

最后更新于: