---
title: 组件
author: pengzhanbo
icon: radix-icons:component-2
createTime: 2024/03/06 09:42:42
permalink: /guide/features/component/
---

## 概述

主题提供了一些具有通用性的组件，可以在任何地方使用。

## `<Badge />` <Badge type="tip" text="badge" />

标签，用于在页面中增加一些提示信息。

### Props

- `type`
  - 类型： `'info' | 'tip' | 'warning' | 'danger'`
  - 默认值：`'tip'`
- `text`
  - 类型：`string`
  - 默认值：`''`

**输入：**

```md
- VuePress - <Badge type="info" text="v2" />
- VuePress - <Badge type="tip" text="v2" />
- VuePress - <Badge type="warning" text="v2" />
- VuePress - <Badge type="danger" text="v2" />
```

**输出：**

- VuePress - <Badge type="info" text="v2" />
- VuePress - <Badge type="tip" text="v2" />
- VuePress - <Badge type="warning" text="v2" />
- VuePress - <Badge type="danger" text="v2" />

## `<Iconify />`

支持 iconify 所有图标，支持通过 icon name 加载图标。

可在 [iconify search](https://icon-sets.iconify.design/) 搜索图标使用。

### Props

- `name`
  - 类型：`string`
  - 默认值：`''`
- `color`
  - 类型：`string`
  - 默认值：`'currentColor'`
- `size`
  - 类型：`string`
  - 默认值：`'1em'`

**输入：**

```md
- home - <Iconify name="material-symbols:home" color="currentColor" size="1em" />
- vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
- twitter - <Iconify name="skill-icons:twitter" size="2em" />
```

**输出：**

- home - <Iconify name="material-symbols:home" color="currentColor" size="1em" />
- vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
- twitter - <Iconify name="skill-icons:twitter" size="2em" />