アイコン

Prosefly の MDX コンポーネントエディターでインラインアイコンとラベルを編集し、Starlight または Prosefly の構文を保てます。

対応プロファイル

同じエディターで Astro、Starlight、Fumadocs、Prosefly の各プロファイルを使えます。サイトに合うプロファイルを選ぶと、その連携で利用できる構文と編集コントロールを確認できます。

ビジュアルモードで編集する

アイコンを選択すると操作パネルが開きます。ピッカーでプロファイルのアイコンセットから選び、属性パネルで対応する説明用ラベルを編集できます。アイコンだけに頼らず、周囲の文章だけでも意味が伝わるようにしましょう。

icon.mdx

StarlightProsefly

ビジュアルソース

サンプルをリセット

エディターを読み込み中…

編集できるサンプルです。変更はこのページ内にのみ保持されます。

ソースの例

import { Icon } from '@astrojs/starlight/components';

## 公開の準備完了

このガイドは確認の準備ができています <Icon name="rocket" label="ロケット" />。

プロファイルによる違い

Prosefly は lucide:rocket のような名前と title を使います。Starlight は対応するアイコン名と label を使います。

import { Icon } from '@astrojs/starlight/components';

公開の準備ができました <Icon name="rocket" label="ロケット" />。

Fumadocs プロファイルに専用のインライン Icon 機能はありません。ほかのコンポーネントでアイコンを選べても、独立した Icon に対応するとは限りません。独自のアイコンや未対応の属性は、ソースで編集してください。

関連する MDX ガイド

次に読む: バッジ · リンクボタン · コールアウト.