# 图标

编辑 Starlight 和 Prosefly MDX 文档中的行内图标及其可访问性描述。

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

使用 Prosefly 的 MDX 组件编辑器编辑行内图标和描述，同时保留 Starlight 或 Prosefly 网站使用的语法。

## 支持的配置

同一个编辑器支持 [Astro](/zh-cn/frameworks/astro/)、[Starlight](/zh-cn/frameworks/starlight/)、[Fumadocs](/zh-cn/frameworks/fumadocs/) 和 [Prosefly](/zh-cn/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/zh-cn/editor/components/badge/) · [链接按钮](/docs/zh-cn/editor/components/link-button/) · [提示块](/docs/zh-cn/editor/components/callout/).