article-icons

Name: article-icons
Author: smallnest

github.com/smallnest设计与 UI296267 次安装6 周前更新

代码仓库

关于 article-icons

article-icons 是面向文档作者的技能，可为 Markdown 或 HTML 文章添加 itshover 图标。它将图标转换为静态内联 SVG，并要求先确认图标与章节的对应方案，再编辑文档。

主要功能

01从 itshover 获取图标并转换为 SVG
02支持 Markdown 与 HTML 嵌入
03按文章结构规划图标位置
04编辑前确认图标映射
05检查编辑后的渲染效果

适用场景

01为文章标题配上语义相关图标
02在 Markdown 文档中嵌入 SVG 图标
03为 HTML 文档的章节添加图标

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/smallnest/goal-workflow --skill article-icons

安装后在 Claude Code 中输入/article-icons确认已加载。

附带文件scripts/fetch_icon.pyscripts/icon_names.json

详细介绍

文章图标（itshover）

使用 itshover 图标集，为文章增添雅致的图标。itshover 以 shadcn 注册表组件的形式发布了 263 个图标；此技能会下载这些图标，并将每个图标转换为简洁、静态的内联 SVG，可直接插入 Markdown 或 HTML——无需 React、motion 或构建步骤。

触发方式

当用户希望为文档配上图标时使用：

/article-icons <file>
“给这篇文章配图标”、“给文章配图”、“为这篇文章添加图标”、“用图标为文章配图”

输入

目标文件 — 要配图标的文章（.md、.html、.mdx 等）。如果用户未提供，请询问。
样式偏好（可选）— 颜色、尺寸、图标放置位置。否则使用下方的合理默认值。

工具

scripts/fetch_icon.py 是唯一会变化的部分。它会获取图标并将静态 SVG 输出到标准输出。

# Get one icon (defaults: size 24, color currentColor, stroke-width 2)
python3 scripts/fetch_icon.py heart-icon

# Customize
python3 scripts/fetch_icon.py rocket-icon --size 32 --color "#d97757" --stroke-width 1.5

# Discover names (do this FIRST — names must match exactly)
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 工具等）。
规划图标映射。 为每个放置位置选择语义匹配的图标。应匹配含义，而不只是关键词——“性能”章节 → rocket-icon 或 zap-icon；“安全”章节 → 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/ 文件夹中，并引用它：![](assets/icons/rocket-icon.svg)。如果不确定用户的偏好，请先询问。

默认值

尺寸： h1 旁为 24px，h2/h3 旁为 20–22px，文本行内为 16px。
颜色： 使用 currentColor，让图标继承文本颜色。只有用户需要强调色时才用 --color 覆盖。
密度： 每个标题配一个图标，再为少数真正关键的概念配图标。不要给每个项目符号或句子都加图标——克制才显得精致。
对齐： HTML 中的标题图标始终使用 display:flex;align-items:center;gap:.4–.5rem。

图标选择速查表

这些名称已确认存在，但图标集会变动——获取图标前，请务必使用 --search 再次确认。

主题	确认存在的图标名称
简介 / 概览	`book-icon`、`home-icon`、`globe-icon`、`map-pin-icon`
性能 / 速度	`rocket-icon`、`gauge-icon`、`clock-icon`
安全	`shield-check`、`lock-icon`
数据 / 图表	通过 `--search` 搜索 `database` 系列、`chart-bar-icon`、`chart-line-icon`、`chart-pie-icon`、`cloud-1-icon`
设置 / 配置	`gear-icon`、`sliders-horizontal-icon`
警告 / 备注	`triangle-alert-icon`、`info-circle-icon`、`filled-bell-icon`
成功 / 完成	`checked-icon`、`double-check-icon`、`simple-checked-icon`
创意	`brain-circuit-icon`、`sparkles-icon`、`star-icon`、`bulb-svg`
AI / 品牌	`brand-anthropic-icon`、`brand-gemini-icon`、……（`--search brand`）
导航	`arrow-narrow-*-icon`、`down-chevron`、`right-chevron`

边缘情况

场景	处理方式
找不到图标名称（404）	运行 `--search <term>`；选择最接近的真实名称。切勿自行编造名称。
图标无法转换（少见；约 263 个中有 2 个使用 JS 映射路径）	脚本会输出明确的错误信息。选择含义相近的替代图标。
无网络连接	无法获取 SVG；告知用户此技能需要访问 itshover.com 的网络连接。
Markdown 渲染器会移除内联 SVG	改用 `assets/icons/*.svg` 和图片引用。
文章中已有图标	询问是否替换、补充，还是跳过这些部分。
文章很长	先确认前几个部分的映射，再将同一系列一致地应用到全文。

检查清单

完成前：

每个图标名称都已通过 --search/--list 确认（未猜测名称）
全文使用同一图标系列 / 颜色
图标放置在标题和真正关键的要点处，而非到处添加
标题图标与文本垂直对齐（使用 flex + gap）
重新读取已编辑的文件；目视确认 HTML 能正确渲染
向用户报告映射摘要

支持 Markdown

登录后评论