# 导航图标

## 使用方法

`NavIcon` 是一个圆形底、带强调色的图标容器。放在 `TopNavHeading`、`PageNavHeader` 这类导航标题里，让人一眼认出这是哪个分区或哪个应用。

```ts
import { NavIcon } from '@astryx-vue/core/NavItem'
```

图标可以用 `iconClass` 传一个 CSS 图标类，也可以把图标元素直接放进默认插槽。

### 结构

- **圆形底**: 圆形的着色容器，里面装着传进来的图标。
- **图标**: 调用方给的可视内容，画在圆形底里。

## 最佳实践

| 指引 | 实践 |
| --- | --- |
| 推荐 | 放在导航标题里，给这个分区一个认得出的视觉锚点。 |
| 推荐 | 传 `Icon`，或尺寸接近的图标组件，比例才不会变形。 |
| 避免 | 别拿 `NavIcon` 当按钮用。它只是展示用的容器。 |

## 示例

常见的用法和不同的状态。

### 基本用法

包着语义图标的圆形底容器。可以当标志，也可以当前导航标题里的强调图标。

```vue
<script setup lang="ts">
import { NavIcon } from '@astryx-vue/core/NavItem'
import { HStack } from '@astryx-vue/core/Stack'
</script>

<template>
  <HStack align="center" :gap="4">
    <NavIcon icon-class="i-carbon-search" />
    <NavIcon icon-class="i-carbon-calendar" />
  </HStack>
</template>
```

## NavIcon 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `iconClass` | `string` | — | 画在圆形底上的 CSS 图标类名，例如 `i-carbon-search`。不传时渲染默认插槽里的内容。 |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 圆形底的直径。 |
| `label` | `string` | — | 无障碍名称。传了之后这个圆对读屏来说就是一张图片；不传就对读屏隐藏，旁边已经有文字说明时这样做正好。 |

## 插槽

- `default`：图标内容。没有传 `iconClass` 时才用它。放一个 `Icon`，或任何同样大小的元素都可以。

这个圆只负责展示：它是一个 `span`，永远不会变成按钮或链接，所以不要往它上面挂点击。需要能按的时候用 `IconButton` 或者 `NavItem`。