# @astraicons/vue 中文文档

规范地址：https://npmcn.com/package/%40astraicons/vue/

版本：1\.7\.0
npm 元数据更新时间：2025-12-31T04:03:45.148Z
中文译文更新时间：2026-11-07T00:50:16.104Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40astraicons/vue
原文对照：https://npmcn.com/package/%40astraicons/vue/?lang=original
项目主页：https://www.uiastra.com/
源码仓库：https://github.com/uiastra/astraicons

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：104 MB，5181 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：vue \>= 3
- 首次发布：2024-06-13T03:24:28.205Z
- 最新版本发布：2025-12-31T04:03:44.777Z
- 近 30 天下载量：7117（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：49（近 12 个月 12 个）

## 中文简介

为网站,应用程序,社交网络,和平面媒体所设计的一套综合图标,专门为UI Astra所定制.

## 安装

```sh
npm install @astraicons/vue
```

也可以使用：`pnpm add @astraicons/vue`、`yarn add @astraicons/vue`、`bun add @astraicons/vue`

## README

# @ astraicons/ veue (英语)

[![AstraIcons](https://raw.githubusercontent.com/uiastra/astraicons/HEAD/.github/light.jpg)](https://uiastra.com/)

Astra 图标集的美丽Vue 3图标. 跨越5个风格的900+图标.

[![npm version](https://img.shields.io/npm/v/@astraicons/vue?color=green)](https://www.npmjs.com/package/@astraicons/vue) [![npm downloads](https://img.shields.io/npm/dm/@astraicons/vue?color=green)](https://www.npmjs.com/package/@astraicons/vue) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/uiastra/astraicons/blob/main/LICENSE)

## 安装

```bash
npm install @astraicons/vue
# or
yarn add @astraicons/vue
# or
pnpm add @astraicons/vue
```

## 使用量

从各自的样式目录中导入图标 :

```vue
<template>
  <div>
    <HomeIcon class="w-6 h-6" />
    <HeartIcon class="w-6 h-6 text-red-500" />
    <StarIcon class="w-6 h-6 text-yellow-500" />
    <AppleIcon class="w-8 h-8" />
    <CubeIcon class="w-8 h-8 text-purple-500" />
  </div>
</template>

<script setup>
import { HomeIcon } from '@astraicons/vue/linear';
import { HeartIcon } from '@astraicons/vue/bold';
import { StarIcon } from '@astraicons/vue/duotone';
import { AppleIcon } from '@astraicons/vue/brand';
import { CubeIcon } from '@astraicons/vue/3d';
</script>
```

## 图标样式

### 线性 (288个图标)

带有1.5px中风宽度的大纲图标。 适合现代的,最小化的界面.

```js
import { ActivityIcon, BellIcon, CameraIcon } from '@astraicons/vue/linear';
```

### 粗体 (288 个图标)

填充或粗体的中风图标,用于强调并更能见度更小的尺寸.

```js
import { ActivityIcon, BellIcon, CameraIcon } from '@astraicons/vue/bold';
```

### Duotone (288个图标)

将填充和外观风格相结合的双通图标,用于深度和视觉兴趣.

```js
import { ActivityIcon, BellIcon, CameraIcon } from '@astraicons/vue/duotone';
```

### 品牌( 18个图标)

包括社交媒体平台和受欢迎品牌在内的公司与服务标志.

```js
import { AppleIcon, GoogleIcon, TwitterIcon } from '@astraicons/vue/brand';
```

### 三维 (32个图标)

当代界面有深度和视角的现代三维风格图标.

```js
import { CubeIcon, FolderIcon, BoxIcon } from '@astraicons/vue/3d';
```

## 道具

所有图标都是接受标准 HTML 属性的功能组件:

```vue
<template>
  <HomeIcon 
    class="custom-class"
    :style="{ color: 'blue' }"
    @click="handleClick"
    role="img"
    aria-label="Home"
  />
</template>
```

## 实例

### 有尾风CSS

```vue
<template>
  <HomeIcon class="w-8 h-8 text-blue-500 hover:text-blue-600 transition-colors" />
</template>
```

### 带有内线样式

```vue
<template>
  <HomeIcon :style="{ width: '32px', height: '32px', color: '#3B82F6' }" />
</template>
```

### 在按钮中

```vue
<template>
  <button class="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded">
    <SaveIcon class="w-5 h-5" />
    Save Changes
  </button>
</template>

<script setup>
import { SaveIcon } from '@astraicons/vue/linear';
</script>
```

### Vue 3 组成 API

```vue
<template>
  <component :is="currentIcon" class="w-6 h-6" />
</template>

<script setup>
import { ref, computed } from 'vue';
import { HomeIcon, SettingsIcon } from '@astraicons/vue/linear';

const isHome = ref(true);
const currentIcon = computed(() => isHome.value ? HomeIcon : SettingsIcon);
</script>
```

## 类型脚本支持

所有图标全部打入. TypeScript将为所有可用的图标提供自动完成.

```vue
<script setup lang="ts">
import { HomeIcon } from '@astraicons/vue/linear';
import type { FunctionalComponent } from 'vue';

const MyIcon: FunctionalComponent = HomeIcon;
</script>
```

## 树摇

此包被优化为树摇. 只有您导入的图标才会包含在您的捆绑中 .

```js
// ✅ Good - only imports what you need
import { HomeIcon } from '@astraicons/vue/linear';

// ❌ Avoid - imports entire style directory
import * as Icons from '@astraicons/vue/linear';
```

## 软件包信息

-   **软件包大小**:~14MB 共计(未包装)
-   **文件**: 3,524个文件(JS + TypeScript定义)
-   **树能震动**: 是 - 只有导入的图标被捆绑
-   **同伴依赖关系**页:1

## 可用图标

查看完整图标列表 :

-   [浏览 UNPKG](https://unpkg.com/browse/@astraicons/vue/) - 查看软件包内容
-   [交互式图片库](https://uiastra.com/) - 搜索和预览图标
-   [反应图标列表](https://github.com/uiastra/astraicons/blob/main/react/ICON_LIST.md) - 完整列表(与Vue中可用的图标相同)

## 浏览器支持

-   颜色( 最新)
-   火狐( 最新)
-   萨法里(最新)
-   边缘( 最新)

## 捐款

我们欢迎为加强该项目而作的贡献。 我们目前的重点是:

-   QQ 已有图标的错误修正
-   QQ 类型脚本改进
-   文件更新
-   QQ 新的图标贡献( 目前尚未接受)

## 相关软件包

-   [@ astraicons/ 反应](https://www.npmjs.com/package/@astraicons/react) - 反应组件
-   [星盘](https://www.npmjs.com/package/astraicons) - SVG 图标文件

## 贷项

-   图标设计由 [UI 阿斯特拉语Name](https://uiastra.com/)
-   以 [赫罗伊孔斯](https://github.com/tailwindlabs/heroicons)

## 许可证

麻省理工学院 [UI 阿斯特拉语Name](https://uiastra.com/)

## 链接

-   [GitHub 仓库](https://github.com/uiastra/astraicons)
-   [图标图片库](https://uiastra.com/)
-   [报告问题](https://github.com/uiastra/astraicons/issues)

## 常见问题

### @astraicons/vue 是什么？

为网站,应用程序,社交网络,和平面媒体所设计的一套综合图标,专门为UI Astra所定制\.

### 如何安装 @astraicons/vue？

在项目目录运行 npm install @astraicons/vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（\>= 3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @astraicons/vue 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @astraicons/vue 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @astraicons/vue 可以商用吗？

@astraicons/vue 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @astraicons/vue 的下载量有多少？

根据 npm 官方下载统计，@astraicons/vue 在 2026/10/07 – 2026/11/05 这 30 天内被下载 7,117 次，日均约 237 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @astraicons/vue 还在维护吗？

最新版本 1\.7\.0 发布于 2025/12/31（10 个月前）；至今共发布 49 个版本，其中过去 12 个月发布了 12 个；首次发布于 2024/06/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。