Article Icons（itshover）用于为文章添加得体的图标。它使用 itshover 图标集，该图标集以 shadcn registry 组件形式发布 263 个图标；本技能会下载这些图标，并把每个转换为干净的静态内联 SVG，可直接放入 Markdown 或 HTML，不需要 React、不需要动画、不需要构建步骤。
触发方式 当用户希望用图标为文档配图时使用： /article-icons <file> “给这篇文章配图标”“给文章配图”“add icons to this article”“illustrate with icons”。
输入 目标文件——要配图的文章（.md、.html、.mdx 等）。如果未提供，则询问。 样式偏好（可选）——颜色、尺寸、图标放置位置。否则使用下面提到的合理默认值。
工具 scripts/fetch_icon.py 是唯一的核心部分。它获取一个图标并向 stdout 打印静态 SVG。
获取一个图标（默认：尺寸 24、颜色 currentColor、描边宽度 2）： python3 scripts/fetch_icon.py heart-icon
自定义： python3 scripts/fetch_icon.py rocket-icon --size 32 --color "#d97757" --stroke-width 1.5
发现名称（务必先做——名称必须完全匹配）： python3 scripts/fetch_icon.py --list python3 scripts/fetch_icon.py --search arrow python3 scripts/fetch_icon.py --search brand
scripts/icon_names.json 是全部 263 个名称的缓存列表，供离线参考。
大多数图标名称以 -icon 结尾（例如 heart-icon、rocket-icon、database-icon），品牌图标使用 brand-<name>-icon（例如 brand-anthropic-icon）。但该约定并不普遍——真实名称包括 shield-check、credit-card、down-chevron、apple-brand-logo、skull-emoji。不要猜测名称，始终先用 --search 解析，猜错只会浪费一次 404。
工作流程
- 阅读文章。识别其结构：标题、章节标题（#/##/<h1>/<h2>）、关键概念、列表分组、提示/警告，以及任何技术/品牌提及（React、GitHub、AI 工具等）。
- 规划图标映射。为每个放置位置选择语义匹配的图标。匹配含义而非仅匹配关键词——“performance”章节 → rocket-icon 或 zap-icon；“security”章节 → shield-icon 或 lock-icon；警告提示 → alert-triangle-icon。优先使用一致的图标家族（全部描边、一种颜色），让文章看起来像经过设计，而不是被装饰。用 --search 解析每个名称。
- 在编辑前与用户确认计划——展示标题→图标映射。这样成本低，能避免整篇文档返工。
- 获取并嵌入。为每个选中的图标运行 fetch_icon.py（可并行获取互不依赖的图标），并把 SVG 内联到其放置位置。参见下方嵌入规则。
- 验证。重新阅读编辑后的文件；对 HTML，打开或截图确认图标渲染和对齐。报告应用的映射。
嵌入规则 HTML——直接内联 SVG。包装标题图标以与文本对齐： <h2 style="display:flex;align-items:center;gap:.5rem;"> <svg ...>...</svg> Performance </h2>
Markdown——GitHub 风格 Markdown 会渲染内联 HTML，因此可嵌入原始 SVG。保持在一行，内联使用时尺寸小（16–20px），标题旁使用 24–28px：
<svg ... width="22" height="22" ...>...</svg> Getting Started
如果目标渲染器会剥离内联 SVG（某些严格的 Markdown 引擎会这样），可退回把每个 SVG 保存到文章旁边的 assets/icons/ 文件夹并引用：。如果不确定，询问用户偏好。
默认值 尺寸：h1 旁 24px，h2/h3 旁 20–22px，正文中内联 16px。 颜色：currentColor，使图标继承文本颜色。仅在用户需要强调色时用 --color 覆盖。 密度：每个标题一个图标 + 为真正关键概念加少量图标。不要给每个项目符号或句子都配图标——克制才显得精致。 对齐：HTML 中标题图标始终使用 display:flex;align-items:center;gap:.4–.5rem。
图标选择速查表 这些名称已验证存在，但集合会变化——获取前始终用 --search 再次确认。 主题与真实图标名称： intro / overview：book-icon、home-icon、globe-icon、map-pin-icon performance / speed：rocket-icon、gauge-icon、clock-icon security：shield-check、lock-icon data / charts：通过 --search 查 database-family、chart-bar-icon、chart-line-icon、chart-pie-icon、cloud-1-icon settings / config：gear-icon、sliders-horizontal-icon warning / note：triangle-alert-icon、info-circle-icon、filled-bell-icon success / done：checked-icon、double-check-icon、simple-checked-icon ideas：brain-circuit-icon、sparkles-icon、star-icon、bulb-svg AI / brands：brand-anthropic-icon、brand-gemini-icon、...（使用 --search brand） navigation：arrow-narrow-*-icon、down-chevron、right-chevron
边界情况 找不到图标名称（404）：运行 --search <term>；选择最接近的真实名称。绝不编造名称。 图标无法转换（罕见；约 2/263 使用 JS map 表示路径）：脚本会打印明确错误。选择含义相近的替代图标。 无网络访问：无法获取 SVG；告知用户该技能需要访问 itshover.com 的网络权限。 Markdown 渲染器剥离内联 SVG：退回 assets/icons/*.svg + 图片引用。 文章已有图标：询问是替换、补充还是跳过这些章节。 文章很长：先确认前几个章节的映射，然后在全篇一致地应用同一家族。
检查清单 完成前： 每个图标名称都通过 --search/--list 解析（没有猜测的名称） 整篇文章使用一致的图标家族/颜色 图标放在标题 + 真正关键点，而非到处都是 标题图标与文本垂直对齐（flex + gap） 重新阅读编辑后的文件；HTML 已目视验证可渲染 向用户报告映射摘要