mcpField
A
article-icons

article-icons

github.com/smallnestデザイン・UI296267 回インストール6 週間前に更新
リポジトリ

article-icons について

article-icons は、Markdown や HTML の記事に itshover のアイコンを追加するスキルです。アイコンを静的なインライン SVG に変換し、編集前に見出しとアイコンの対応案を確認します。

主な機能

  1. 01itshover アイコンの取得と SVG 変換
  2. 02Markdown と HTML への埋め込み
  3. 03記事構成に沿った配置計画
  4. 04編集前のアイコン対応案の確認
  5. 05編集後の表示確認

活用シーン

  1. 01記事見出しへの意味に合ったアイコン追加
  2. 02Markdown 文書への SVG アイコン埋め込み
  3. 03HTML 文書のセクションへのアイコン配置

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/article-iconsを入力して読み込まれたか確認します。

同梱ファイルscripts/fetch_icon.pyscripts/icon_names.json

詳細

Article Icons（itshover）

itshover のアイコンセットを使って、記事にさりげなくアイコンを追加します。itshover は shadcn のレジストリーコンポーネントとして 263 個のアイコンを公開しています。このスキルはそれらをダウンロードし、Markdown や HTML にそのまま挿入できる、クリーンで静的なインライン SVG に変換します。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 になるだけです。

ワークフロー

  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 の場合は、アイコンが正しく表示され、配置が揃っていることを確認するため、ファイルを開くかスクリーンショットを撮ります。適用したアイコンの対応表を報告します。

埋め込みルール

HTML — SVG を直接インラインで埋め込みます。見出しのアイコンは、テキストと揃うようにラップします。

<h2 style="display:flex;align-items:center;gap:.5rem;">
  <svg ...>...</svg> Performance
</h2>

Markdown — GitHub Flavored Markdown はインライン HTML をレンダリングするため、生の SVG を埋め込みます。1 行に収め、インラインで使う場合は小さめ（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 で上書きします。
  • 密度： 見出しごとにアイコンを 1 つ、さらに本当に重要な概念にいくつか追加します。すべての箇条書きや文にアイコンを付けてはいけません。控えめに使うことで洗練された印象になります。
  • 配置： 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 対応