Back to Details

article-icons

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Article Icons (itshover)

文章图标工具（itshover）

Add tasteful icons to an article using the itshover icon set. itshover publishes 263 icons as shadcn registry components; this skill downloads them and converts each into a clean, static, inline SVG that drops straight into Markdown or HTML — no React, no 
motion
, no build step.
使用 itshover 图标集为文章添加美观的图标。itshover 发布了263个作为 shadcn 注册表组件的图标；本技能会下载这些图标，并将每个图标转换为简洁的静态内联 SVG，可直接嵌入 Markdown 或 HTML 中——无需 React、无需 
motion
、无需构建步骤。

Triggers

触发方式

Use when the user wants to illustrate a document with icons:
  • /article-icons <file>
  • "给这篇文章配图标", "给文章配图", "add icons to this article", "illustrate with icons"
当用户想要为文档添加图标配图时使用：
  • /article-icons <文件>
  • "给这篇文章配图标"、"给文章配图"、"add icons to this article"、"illustrate with icons"

Inputs

输入参数

  • Target file — the article to illustrate (
    .md
    , 
    .html
    , 
    .mdx
    , ...). If not given, ask.
  • Style preferences (optional) — color, size, where icons go. Otherwise use sensible defaults below.
  • 目标文件 — 需要配图的文章（
    .md
    、
    .html
    、
    .mdx
    等格式）。若未指定，需询问用户。
  • 样式偏好（可选）—— 图标颜色、尺寸、放置位置。若未指定，则使用下方的合理默认值。

The Tool

工具说明

scripts/fetch_icon.py
is the only moving part. It fetches an icon and prints static SVG to stdout.
bash
undefined
scripts/fetch_icon.py
是唯一的可执行脚本。它负责获取图标并将静态 SVG 输出到标准输出。
bash
undefined

Get one icon (defaults: size 24, color currentColor, stroke-width 2)

获取单个图标（默认参数：尺寸24、颜色currentColor、描边宽度2）

python3 scripts/fetch_icon.py heart-icon
python3 scripts/fetch_icon.py heart-icon

Customize

自定义参数

python3 scripts/fetch_icon.py rocket-icon --size 32 --color "#d97757" --stroke-width 1.5
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` is a cached list of all 263 names for offline reference.

Most icon names end in `-icon` (e.g. `heart-icon`, `rocket-icon`, `database-icon`), and brands use `brand-<name>-icon` (e.g. `brand-anthropic-icon`). But the convention is **not** universal — real names include `shield-check`, `credit-card`, `down-chevron`, `apple-brand-logo`, `skull-emoji`. **Never guess a name. Always resolve it with `--search` first** — a wrong guess just wastes a 404.
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-<名称>-icon` 格式（例如 `brand-anthropic-icon`）。但该命名规则并非通用——实际存在的图标名称包括 `shield-check`、`credit-card`、`down-chevron`、`apple-brand-logo`、`skull-emoji`。**请勿猜测图标名称。务必先使用 `--search` 确认**——错误的猜测只会导致404请求失败。

Workflow

工作流程

  1. Read the article. Identify its structure: title, section headings (
    #
    /
    ##
    /
    <h1>
    /
    <h2>
    ), key concepts, list groups, callouts/warnings, and any tech/brand mentions (React, GitHub, AI tools...).
  2. Plan the icon map. For each placement, choose a semantically matching icon. Match meaning, not just keywords — a "performance" section → 
    rocket-icon
    or 
    zap-icon
    ; a "security" section → 
    shield-icon
    or 
    lock-icon
    ; a warning callout → 
    alert-triangle-icon
    . Prefer one consistent icon family (all outline, one color) so the article looks designed, not decorated. Resolve every name with 
    --search
    .
  3. Confirm the plan with the user before editing — show the heading→icon mapping. This is cheap and avoids reworking a whole document.
  4. Fetch and embed. Run 
    fetch_icon.py
    for each chosen icon (parallelize independent fetches) and inline the SVG at its placement. See embedding rules below.
  5. Verify. Re-read the edited file; for HTML, open it / screenshot to confirm icons render and align. Report the mapping you applied.
  1. 阅读文章：识别文章结构，包括标题、章节标题（
    #
    /
    ##
    /
    <h1>
    /
    <h2>
    ）、关键概念、列表组、提示框/警告信息，以及所有提及的技术/品牌（React、GitHub、AI工具等）。
  2. 规划图标映射：为每个放置位置选择语义匹配的图标。匹配图标含义而非仅关键词——例如“性能”章节可选用 
    rocket-icon
    或 
    zap-icon
    ；“安全”章节可选用 
    shield-icon
    或 
    lock-icon
    ；警告提示框可选用 
    alert-triangle-icon
    。优先选择风格统一的图标系列（全部为轮廓样式、单一颜色），让文章看起来是经过设计的，而非随意装饰。务必使用 
    --search
    确认每个图标名称。
  3. 确认方案：在编辑前向用户确认图标映射方案——展示标题与图标的对应关系。此步骤成本低，可避免后续返工整个文档。
  4. 获取并嵌入图标：为每个选定的图标运行 
    fetch_icon.py
    （可并行执行独立的图标获取请求），并将 SVG 内联到对应的位置。具体嵌入规则见下文。
  5. 验证检查：重新阅读编辑后的文件；若为 HTML 文件，需打开文件或截图确认图标渲染正常且对齐正确。向用户汇报所应用的图标映射方案。

Embedding Rules

嵌入规则

HTML — inline the SVG directly. Wrap heading icons so they align with text:
html
<h2 style="display:flex;align-items:center;gap:.5rem;">
  <svg ...>...</svg> Performance
</h2>
Markdown — GitHub-flavored Markdown renders inline HTML, so embed the raw SVG. Keep it on one line and size it small (16–20px) for inline use, 24–28px beside headings:
markdown
undefined
HTML 文件 — 直接内联 SVG。将标题图标包裹起来，使其与文本对齐：
html
<h2 style="display:flex;align-items:center;gap:.5rem;">
  <svg ...>...</svg> Performance
</h2>
Markdown 文件 — GitHub 风格的 Markdown 支持渲染内联 HTML，因此可直接嵌入原始 SVG。内联使用时保持单行且尺寸较小（16–20px），标题旁使用24–28px：
markdown
undefined

<svg ... width="22" height="22" ...>...</svg> Getting Started

<svg ... width="22" height="22" ...>...</svg> Getting Started


If the target renderer strips inline SVG (some strict Markdown engines do), fall back to saving each SVG into an `assets/icons/` folder next to the article and referencing it: `![](assets/icons/rocket-icon.svg)`. Ask which the user prefers if unsure.

若目标渲染器会移除内联 SVG（部分严格的 Markdown 引擎会如此），则退而求其次，将每个 SVG 保存到文章旁的 `assets/icons/` 文件夹中，再通过引用方式添加：`![](assets/icons/rocket-icon.svg)`。若不确定用户偏好，需询问用户。

Defaults

默认设置

  • Size: 24px beside 
    h1
    , 20–22px beside 
    h2
    /
    h3
    , 16px inline in text.
  • Color: 
    currentColor
    so icons inherit text color. Override with 
    --color
    only when the user wants accent colors.
  • Density: one icon per heading + a few for genuinely key concepts. Do not icon every bullet or sentence — restraint reads as polish.
  • Alignment: always 
    display:flex;align-items:center;gap:.4–.5rem
    for heading icons in HTML.
  • 尺寸：
    h1
    标题旁使用24px，
    h2
    /
    h3
    标题旁使用20–22px，文本内联使用16px。
  • 颜色：默认使用 
    currentColor
    ，使图标继承文本颜色。仅当用户需要强调色时，才使用 
    --color
    参数覆盖默认值。
  • 密度：每个标题配一个图标，仅为真正的关键概念额外添加少量图标。请勿为每个项目符号或句子都添加图标——适度克制才显精致。
  • 对齐方式：HTML 中的标题图标始终使用 
    display:flex;align-items:center;gap:.4–.5rem
    样式。

Icon Selection Cheatsheet

图标选择速查表

These names are verified to exist, but the set changes — always reconfirm with 
--search
before fetching.
ThemeReal icon names
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
database
-family via 
--search
, 
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
以下图标名称已验证存在，但图标集可能会更新——获取图标前务必使用 
--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

Edge Cases

异常场景处理

ScenarioHandling
Icon name not found (404)Run 
--search <term>
; pick the closest real name. Never invent names.
Icon won't convert (rare; ~2/263 use a JS map for paths)Script prints a clear error. Pick an alternative icon with similar meaning.
No network accessCannot fetch SVGs; tell the user the skill needs network access to itshover.com.
Markdown renderer strips inline SVGFall back to 
assets/icons/*.svg
+ image references.
Article already has iconsAsk whether to replace, supplement, or skip those sections.
Very long articleConfirm the mapping for the first few sections, then apply the same family consistently throughout.
场景处理方式
图标名称未找到（404错误）执行 
--search <关键词>
；选择最匹配的真实图标名称。切勿自行编造名称。
图标无法转换（罕见；约2/263个图标使用JS映射路径）脚本会输出明确错误信息。选择含义相近的替代图标。
无网络连接无法获取SVG；告知用户本技能需要访问 itshover.com 的网络权限。
Markdown渲染器移除内联SVG退而求其次，使用 
assets/icons/*.svg
文件夹存储图标并通过图片引用添加。
文章已包含图标询问用户是替换、补充还是跳过已有图标的章节。
文章过长先确认前几个章节的图标映射方案，然后在整篇文章中统一使用相同风格的图标系列。

Checklist

完成检查清单

Before finishing:
  • Every icon name was resolved with 
    --search
    /
    --list
    (no guessed names)
  • One consistent icon family/color across the article
  • Icons placed at headings + genuinely key points, not everywhere
  • Heading icons vertically aligned with text (flex + gap)
  • Edited file re-read; HTML visually verified to render
  • Mapping summary reported to the user
完成操作前需确认：
  • 所有图标名称均通过 
    --search
    /
    --list
    确认（无猜测的名称）
  • 整篇文章使用风格/颜色统一的图标系列
  • 图标仅放置在标题和真正的关键要点处，而非随处添加
  • 标题图标与文本垂直对齐（使用flex + gap样式）
  • 重新阅读编辑后的文件；HTML文件已通过视觉确认渲染正常
  • 已向用户汇报图标映射方案总结