> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 图标

> 使用主流图标库中的图标

从 Font Awesome、Lucide、SVG、外部 URL 或项目文件中添加图标，以增强文档。

<Icon icon="flag" size={32} />

```mdx 图标示例
<Icon icon="flag" size={32} />
```

<div id="inline-icons">
  ## 行内图标
</div>

在段落中使用时，图标会以内联方式放置。

<Icon icon="flag" iconType="solid" /> 你想要的文档，轻松获得。

```markdown 内联图标示例
<Icon icon="flag" iconType="solid" /> 轻松获取你想要的文档。
```

<div id="properties">
  ## 属性
</div>

<ResponseField name="icon" type="string" required>
  要显示的图标。

  可选值：

  * [Font Awesome 图标](https://fontawesome.com/icons) 的名称
  * [Lucide 图标](https://lucide.dev/icons) 的名称
  * 用花括号包裹的、可用于 JSX 的 SVG 代码
  * 指向外部托管图标的 URL
  * 项目中图标文件的路径

  关于自定义 SVG 图标：

  1. 使用 [SVGR 转换器](https://react-svgr.com/playground/) 将 SVG 转换。
  2. 将你的 SVG 代码粘贴到 SVG 输入框中。
  3. 从 JSX 输出框中复制完整的 `<svg>...</svg>` 元素。
  4. 用花括号包裹可用于 JSX 的 SVG 代码：`icon={<svg ...> ... </svg>}`。
  5. 按需调整 `height` 和 `width`。
</ResponseField>

<ResponseField name="iconType" type="string">
  [Font Awesome](https://fontawesome.com/icons) 的图标样式。仅在使用 Font Awesome 图标时生效。

  可选值：`regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。
</ResponseField>

<ResponseField name="color" type="string">
  图标颜色，使用十六进制色值（例如 `#FF5733`）。
</ResponseField>

<ResponseField name="size" type="number">
  图标的大小（以像素为单位）。
</ResponseField>