# アイコン

Starlight と Prosefly の MDX ドキュメントで、インラインアイコンとアクセシブルなラベルを編集します。

import ContentEditor from '@/components/editor/ContentEditor.astro';

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

## 対応プロファイル

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

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

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

<ContentEditor content="icon" />

## ソースの例

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

## 公開の準備完了

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

## プロファイルによる違い

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

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

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

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

## 関連する MDX ガイド

次に読む: [バッジ](/docs/ja/editor/components/badge/) · [リンクボタン](/docs/ja/editor/components/link-button/) · [コールアウト](/docs/ja/editor/components/callout/).