> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# 图标

> 可使用来自流行库、外部 URL，或项目内文件的图标。

使用来自 Font Awesome、Lucide、SVG、外部 URL 或项目文件的图标，丰富你的文档。

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

```mdx Icon example theme={null}
<Icon icon="flag" size={32} />
```

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

当在句子、段落或标题中使用时，图标会以内联形式呈现。 <Icon icon="flag" iconType="solid" /> 你可以将图标用于装饰，或用于强化视觉重点。

```markdown Inline icon example theme={null}
图标在句子、段落或标题中使用时会内联显示。<Icon icon="flag" iconType="solid" /> 使用图标可以起到装饰作用或增强视觉效果。
```

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

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

  选项：

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

  针对自定义 SVG 图标：

  1. 使用 [SVGR converter](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) 的 icon 样式。仅在使用 Font Awesome 图标时使用。

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

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

<ResponseField name="size" type="number">
  icon 的尺寸（像素）。
</ResponseField>

<ResponseField name="className" type="string">
  应用于 icon 的自定义 CSS 类名。
</ResponseField>