Lucide 图标在内容型站点里的克制用法

图标不是装饰库存，而是信息识别的捷径。

内容型页面不需要满屏图标表演。真正有用的图标应该只出现在导航、状态、时间、外链和联系入口里，帮助用户快速扫描信息，而不是抢标题和正文的戏。

Lucide 的优点是轻、干净、覆盖面广，但也正因为太好拿，项目很容易变成“每个按钮都想贴个小画”的现场。我的原则是 只在能提升识别效率时加图标。

图标应该承担语义

我会优先把图标放在用户需要快速识别的地方，比如时间、外链、邮件、主题切换、返回入口。装饰性图标可以有，但不能让读者误以为它能点击。

适合使用图标的位置：

• 导航里的明确动作。
• 元信息里的时间、阅读时长。
• 外链提示。
• 主题切换和联系入口。

不适合乱塞图标的位置：

1. 每个段落开头。
2. 每个标签前面。
3. 已经足够清楚的标题旁边。
4. 为了填空而存在的按钮。

尺寸和线宽要统一

Lucide 的图标本质上是 SVG。项目里最好统一 size 和 strokeWidth，不要一个地方 16，一个地方 23，线宽还忽粗忽细。

import { Clock, ExternalLink } from 'lucide-react';

export function MetaIcon() {
  return <Clock size={16} strokeWidth={1.8} aria-hidden="true" />;
}

如果图标只是辅助文字，就应该加上 aria-hidden。真正可点击的图标按钮则需要明确的 aria-label，不然屏幕阅读器只会一脸懵。

内容站点要让文字当主角

在博客里，标题和正文才是主角。图标的职责是帮读者定位，不是表演存在感。

我的使用边界

只要一个图标不能让信息更快被识别，我就倾向删掉。删不掉的图标，再考虑尺寸、颜色和 hover 状态。顺序不能反，先克制，再打磨。

落地复查

• 保留导航、外链、联系入口里的必要图标。
• 给纯装饰图标加 aria-hidden。
• 后续新增按钮时，先写清楚文案再决定是否需要图标。