> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiIxYWY0OWRiMC1jYjQ4LTRkMzQtYjY3Zi1lZDE2NTUzN2M1YjEiLCJleHAiOjE3NzgyNjQyODUsImlhdCI6MTc3ODI2Mzk4NX0.S2iATNHa4hmBG0AGghzpmzzPWlmfy-VCO5Xw86ZUZ4g
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# 图标组件

> 学习如何在您的 Fern 文档中添加 Font Awesome 图标。使用 Icon 组件自定义图标大小、颜色和样式。

`<Icon>` 组件可在您的文档中显示 [Font Awesome](https://fontawesome.com/) 图标，支持所有 Font Awesome Pro 样式。

## 用法

<div>
  <div>
    <div>
      <Icon icon="seedling" />

       基本图标
    </div>
  </div>
</div>

```jsx Markdown
<Icon icon="seedling" /> 基本图标
```

## 变体

### 大小

<div>
  <div>
    <div>
      <Icon icon="warning" size="7" />

       大图标
    </div>
  </div>
</div>

```jsx Markdown
<Icon icon="warning" size="7" /> 大图标
```

### 颜色

<div>
  <div>
    <div>
      <Icon icon="check" color="#22C55E" />

       彩色图标
    </div>
  </div>
</div>

```jsx Markdown
<div><Icon icon="check" color="#22C55E" /> 彩色图标</div>
```

### Font Awesome 样式

<div>
  <div>
    <div>
      <div>
        <Icon icon="heart" />

         默认（实心）
      </div>

      <div>
        <Icon icon="fa-regular fa-heart" />

         常规
      </div>

      <div>
        <Icon icon="fa-light fa-heart" />

         细
      </div>

      <div>
        <Icon icon="fa-thin fa-heart" />

         超细
      </div>

      <div>
        <Icon icon="fa-duotone fa-heart" />

         双色
      </div>

      <div>
        <Icon icon="fa-sharp fa-solid fa-heart" />

         尖锐实心
      </div>

      <div>
        <Icon icon="fa-brands fa-github" />

         品牌
      </div>
    </div>
  </div>
</div>

```jsx Markdown
<Icon icon="heart" /> 默认（实心）
<Icon icon="fa-regular fa-heart" /> 常规
<Icon icon="fa-light fa-heart" /> 细
<Icon icon="fa-thin fa-heart" /> 超细
<Icon icon="fa-duotone fa-heart" /> 双色
<Icon icon="fa-sharp fa-solid fa-heart" /> 尖锐实心
<Icon icon="fa-brands fa-github" /> 品牌
```

### 自定义 SVG 图标

使用相对路径显示项目中的自定义 SVG 文件。

```jsx Markdown
<Icon icon="./images/fern-leaf.svg" /> 自定义 SVG 图标
```

## 属性

<ParamField path="icon" type="string" required={true}>
  Font Awesome 图标名称（例如："heart" 或 "fa-solid fa-heart"）或 SVG 文件的相对路径（例如："./images/icon.svg"）
</ParamField>

<ParamField path="color" type="string">
  图标颜色（十六进制、RGB 或颜色名称）。如果同时设置了 `lightModeColor` 和 `darkModeColor`，则忽略此属性
</ParamField>

<ParamField path="darkModeColor" type="string">
  深色模式下的图标颜色（十六进制、RGB 或颜色名称）
</ParamField>

<ParamField path="lightModeColor" type="string">
  浅色模式下的图标颜色（十六进制、RGB 或颜色名称）
</ParamField>

<ParamField path="size" type="number" default="4">
  图标的大小（宽度和高度），按 `size * 4` 像素计算（例如：4 = 16px，8 = 32px）。
</ParamField>

<ParamField path="className" type="string">
  应用于图标的额外 CSS 类
</ParamField>