# 图标

从本地文件或 Iconify 图标集渲染 SVG 图标。

**Import:** `import Icon from "@cloudflare/nimbus-docs/components/Icon.astro";`  
**Canonical:** https://nimbus-docs.cn/components/icon/

## Agent payload (JSON)

```json
{
  "slug": "icon",
  "name": "图标",
  "tagline": "从本地文件或 Iconify 图标集渲染 SVG 图标。",
  "import": "import Icon from \"@cloudflare/nimbus-docs/components/Icon.astro\";",
  "canonicalUrl": "https://nimbus-docs.cn/components/icon/",
  "props": [
    {
      "name": "name",
      "type": "string",
      "required": true,
      "description": "图标名称。裸名称（如 `workers`）会解析为本地 `src/icons/*.svg`。带前缀的名称（如 `ph:rocket`）会解析为已安装的 `@iconify-json/*` 图标集。"
    },
    {
      "name": "size",
      "type": "number | string",
      "required": false,
      "description": "同时设置 `width` 和 `height` 的快捷方式。"
    },
    {
      "name": "width",
      "type": "number | string",
      "required": false,
      "description": "覆盖 SVG 的宽度。"
    },
    {
      "name": "height",
      "type": "number | string",
      "required": false,
      "description": "覆盖 SVG 的高度。"
    },
    {
      "name": "is:inline",
      "type": "boolean",
      "defaultValue": "false",
      "required": false,
      "description": "为兼容 astro-icon 的 API 而保留。SVG 始终以内联方式渲染；此属性对输出无影响。"
    },
    {
      "name": "title",
      "type": "string",
      "required": false,
      "description": "在 `<title>` 中渲染的无障碍标题。"
    },
    {
      "name": "desc",
      "type": "string",
      "required": false,
      "description": "在 `<desc>` 中渲染的无障碍描述。"
    }
  ]
}
```