# @frontiers/icons 中文文档

规范地址：https://npmcn.com/package/%40frontiers/icons/

版本：2\.3\.0
npm 元数据更新时间：2026-11-05T08:31:30.000Z
中文译文更新时间：2026-11-15T15:02:43.890Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40frontiers/icons
原文对照：https://npmcn.com/package/%40frontiers/icons/?lang=original
项目主页：https://github.com/frontiersin/primeuix/tree/main/packages/icons#readme
源码仓库：https://github.com/frontiersin/primeuix

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

- 包体积（解压后）：788 kB，211 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：vue ^3\.0\.0
- 首次发布：2025-10-23T15:26:01.037Z
- 最新版本发布：2026-11-05T08:31:29.800Z
- 近 30 天下载量：8521（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 4 个）

## 中文简介

综合图标库,有203个SVG图标和Frontiers设计系统的Vue 3组件

## 安装

```sh
npm install @frontiers/icons
```

也可以使用：`pnpm add @frontiers/icons`、`yarn add @frontiers/icons`、`bun add @frontiers/icons`

## README

# @ frontiers/ icons (英语)

> 203 专业设计的图标作为Vue 3组件和SVG文件用于前沿设计系统.

[![npm version](https://img.shields.io/npm/v/@frontiers/icons.svg)](https://www.npmjs.com/package/@frontiers/icons) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

## 特征

-   🎨 **203 个图标** - 完整的设计系统覆盖
-   ⚡ **Vue 3 组件** - 准备使用,支持类型脚本
-   📦 **树能震动** - 只导入你需要的东西
-   🎯 **可自定义** - 动态大小和颜色通过 `currentColor`
-   📁 **原始 SVGs 软件** - 在任何框架内使用

## 安装

```bash
npm install @frontiers/icons
# or
pnpm add @frontiers/icons
```

## 快速启动

```vue
<script setup>
import { ChevronRightIcon, UserFillIcon, AlertIcon } from "@frontiers/icons"
</script>

<template>
  <ChevronRightIcon :size="24" />
  <UserFillIcon :size="32" class="text-blue-500" />
  <AlertIcon />
</template>
```

## 使用量

### 导入组件

```vue
<script setup>
// Import from root (recommended)
import { ChevronRightIcon, AlertIcon } from "@frontiers/icons"

// Or from components
import { ChevronRightIcon } from "@frontiers/icons/components"
</script>
```

### 导入 SVG 文件

```javascript
import chevronRight from "@frontiers/icons/svg/chevron-right.svg"
```

### 道具

所有 Vue 组件接受:

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `size` | `Number | String` | `24` | Px 图标大小 |

加所有标准 SVG 属性通过 `v-bind="$attrs"`。 。 。 .

### 样式

图标使用 `currentColor` 以容易为主题:

```vue
<template>
  <!-- Inherits text color -->
  <div class="text-blue-500">
    <ChevronRightIcon />
  </div>

  <!-- With Tailwind -->
  <AlertIcon class="w-6 h-6 text-red-500" />

  <!-- Custom size -->
  <UserFillIcon :size="32" style="color: #007bff;" />
</template>
```

## 实例

### 带有图标的按钮

```vue
<template>
  <button class="btn">
    <span>Next</span>
    <ChevronRightIcon :size="20" />
  </button>
</template>
```

### 装入状态

```vue
<script setup>
import { SpinnerIcon } from "@frontiers/icons"
const loading = ref(false)
</script>

<template>
  <button :disabled="loading">
    <SpinnerIcon v-if="loading" class="animate-spin" :size="20" />
    <span v-else>Submit</span>
  </button>
</template>
```

### 动态图标

```vue
<script setup>
import { computed } from "vue"
import * as Icons from "@frontiers/icons"

const props = defineProps({ icon: String, size: Number })
const IconComponent = computed(() => Icons[props.icon])
</script>

<template>
  <component :is="IconComponent" :size="size" />
</template>

<!-- Usage: pass icon names like "ChevronRightIcon", "UserFillIcon", etc. -->
```

### 导航菜单

```vue
<script setup>
import { HomeIcon, UserIcon, SettingsIcon } from "@frontiers/icons"
</script>

<template>
  <nav>
    <router-link to="/"><HomeIcon :size="20" /> Home</router-link>
    <router-link to="/profile"><UserIcon :size="20" /> Profile</router-link>
    <router-link to="/settings"
      ><SettingsIcon :size="20" /> Settings</router-link
    >
  </nav>
</template>
```

## 可用图标( 203)

查看 [演示.html](https://npmcn.com/package/%40frontiers/icons/demo.html) 文件或按类别探索图标.

**导航(32)**

`ArrowDownIcon`, (中文(简体) ), `ArrowDownCircledIcon`, (中文(简体) ), `ArrowDownCircledFillIcon`, (中文(简体) ), `ArrowDownLeftIcon`, (中文(简体) ), `ArrowDownRightIcon`, (中文(简体) ), `ArrowLeftIcon`, (中文(简体) ), `ArrowLeftAndRightIcon`, (中文(简体) ), `ArrowLeftCircledIcon`, (中文(简体) ), `ArrowLeftCircledFillIcon`, (中文(简体) ), `ArrowRightIcon`, (中文(简体) ), `ArrowRightCircledIcon`, (中文(简体) ), `ArrowRightCircledFillIcon`, (中文(简体) ), `ArrowUpIcon`, (中文(简体) ), `ArrowUpAndDownIcon`, (中文(简体) ), `ArrowUpCircledIcon`, (中文(简体) ), `ArrowUpCircledFillIcon`, (中文(简体) ), `ArrowUpLeftIcon`, (中文(简体) ), `ArrowUpRightIcon`, (中文(简体) ), `ChevronDownIcon`, (中文(简体) ), `ChevronDownCircledIcon`, (中文(简体) ), `ChevronDownCircledFillIcon`, (中文(简体) ), `ChevronLeftIcon`, (中文(简体) ), `ChevronLeftCircledIcon`, (中文(简体) ), `ChevronLeftCircledFillIcon`, (中文(简体) ), `ChevronRightIcon`, (中文(简体) ), `ChevronRightCircledIcon`, (中文(简体) ), `ChevronRightCircledFillIcon`, (中文(简体) ), `ChevronUpIcon`, (中文(简体) ), `ChevronUpCircledIcon`, (中文(简体) ), `ChevronUpCircledFillIcon`, (中文(简体) ), `FirstPageIcon`, (中文(简体) ), `LastPageIcon`

**UI 元素 (21)**

`BurgerIcon`, (中文(简体) ), `CheckIcon`, (中文(简体) ), `CheckmarkIcon`, (中文(简体) ), `CheckmarkFillIcon`, (中文(简体) ), `CloseIcon`, (中文(简体) ), `CloseCircledIcon`, (中文(简体) ), `CloseCircledFillIcon`, (中文(简体) ), `DragIcon`, (中文(简体) ), `FilterIcon`, (中文(简体) ), `FilterFillIcon`, (中文(简体) ), `HomeIcon`, (中文(简体) ), `HomeFillIcon`, (中文(简体) ), `LessIcon`, (中文(简体) ), `MagnifyingGlassIcon`, (中文(简体) ), `MoreCircledIcon`, (中文(简体) ), `MoreCircledFillIcon`, (中文(简体) ), `MoreOptionsHorizontalIcon`, (中文(简体) ), `MoreOptionsVerticalIcon`, (中文(简体) ), `SpinnerIcon`, (中文(简体) ), `UserIcon`, (中文(简体) ), `UserFillIcon`

**行动(23)**

`AttachmentIcon`, (中文(简体) ), `CopyIcon`, (中文(简体) ), `DeleteIcon`, (中文(简体) ), `DeleteFillIcon`, (中文(简体) ), `DownloadIcon`, (中文(简体) ), `EditIcon`, (中文(简体) ), `ForwardIcon`, (中文(简体) ), `FullscreenIcon`, (中文(简体) ), `LinkIcon`, (中文(简体) ), `LinkedinIcon`, (中文(简体) ), `NoFullscreenIcon`, (中文(简体) ), `OpenInNewIcon`, (中文(简体) ), `OpenInNewFillIcon`, (中文(简体) ), `ReloadIcon`, (中文(简体) ), `ReplyIcon`, (中文(简体) ), `ReplyAllIcon`, (中文(简体) ), `SaveIcon`, (中文(简体) ), `SaveFillIcon`, (中文(简体) ), `SendIcon`, (中文(简体) ), `SendFillIcon`, (中文(简体) ), `ShareIcon`, (中文(简体) ), `ShareFillIcon`, (中文(简体) ), `StopIcon`

**状态和反馈(23)**

`AlertIcon`, (中文(简体) ), `AlertFillIcon`, (中文(简体) ), `ClockIcon`, (中文(简体) ), `ClockFillIcon`, (中文(简体) ), `FeedbackErrorBlackIcon`, (中文(简体) ), `FeedbackErrorWhiteIcon`, (中文(简体) ), `FeedbackInfoBlackIcon`, (中文(简体) ), `FeedbackInfoWhiteIcon`, (中文(简体) ), `FeedbackSuccessBlackIcon`, (中文(简体) ), `FeedbackSuccessWhiteIcon`, (中文(简体) ), `FeedbackWarningBlackIcon`, (中文(简体) ), `FeedbackWarningWhiteIcon`, (中文(简体) ), `HelpIcon`, (中文(简体) ), `HelpFillIcon`, (中文(简体) ), `HelpNoCircledIcon`, (中文(简体) ), `HideIcon`, (中文(简体) ), `HideFillIcon`, (中文(简体) ), `InfoIcon`, (中文(简体) ), `InfoFillIcon`, (中文(简体) ), `NotificationIcon`, (中文(简体) ), `NotificationFillIcon`, (中文(简体) ), `ViewIcon`, (中文(简体) ), `ViewFillIcon`

**内容类型(15)**

`ArticleIcon`, (中文(简体) ), `ArticleFillIcon`, (中文(简体) ), `ArticleNewIcon`, (中文(简体) ), `ContentHubIcon`, (中文(简体) ), `EBookIcon`, (中文(简体) ), `EBookFillIcon`, (中文(简体) ), `NewsletterIcon`, (中文(简体) ), `NewsletterFillIcon`, (中文(简体) ), `PaperIcon`, (中文(简体) ), `PaperFillIcon`, (中文(简体) ), `ProductHubIcon`, (中文(简体) ), `PublicIcon`, (中文(简体) ), `PublicFillIcon`, (中文(简体) ), `ResearchTopicsIcon`, (中文(简体) ), `ResearchTopicsFillIcon`

**社会媒体(8)**

`BlueskyIcon`, (中文(简体) ), `FacebookIcon`, (中文(简体) ), `InstagramIcon`, (中文(简体) ), `LinkedinIcon`, (中文(简体) ), `OrcidIcon`, (中文(简体) ), `OrcidFillIcon`, (中文(简体) ), `TikTokIcon`, (中文(简体) ), `XTwitterIcon`, (中文(简体) ), `YoutubeIcon`

**组织(12个)**

`CalendarIcon`, (中文(简体) ), `CalendarFillIcon`, (中文(简体) ), `FilesIcon`, (中文(简体) ), `FilesFillIcon`, (中文(简体) ), `GroupIcon`, (中文(简体) ), `GroupFillIcon`, (中文(简体) ), `ListIcon`, (中文(简体) ), `ListNumberIcon`, (中文(简体) ), `NumberedListIcon`, (中文(简体) ), `SortIcon`, (中文(简体) ), `SortAscendingIcon`, (中文(简体) ), `SortDescendingIcon`

**互动(12)**

`BookmarkIcon`, (中文(简体) ), `BookmarkFillIcon`, (中文(简体) ), `ChatIcon`, (中文(简体) ), `ChatFillIcon`, (中文(简体) ), `FavoriteIcon`, (中文(简体) ), `FavoriteFillIcon`, (中文(简体) ), `LikeIcon`, (中文(简体) ), `LikeFillIcon`, (中文(简体) ), `ReviewForumIcon`, (中文(简体) ), `ReviewForumFillIcon`, (中文(简体) ), `StarIcon`, (中文(简体) ), `StarFillIcon`

**文本格式(4)**

`BoldIcon`, (中文(简体) ), `ItalicIcon`, (中文(简体) ), `ReWriteIcon`, (中文(简体) ), `UnderlineIcon`

**其他(56个)**

`AtIcon`, (中文(简体) ), `ChartBarIcon`, (中文(简体) ), `ChartBarFillIcon`, (中文(简体) ), `CloudDownloadIcon`, (中文(简体) ), `CloudDownloadFillIcon`, (中文(简体) ), `CloudOfflineIcon`, (中文(简体) ), `CloudOfflineFillIcon`, (中文(简体) ), `CloudOnlineFillIcon`, (中文(简体) ), `DesktopIcon`, (中文(简体) ), `DesktopFillIcon`, (中文(简体) ), `DislikeIcon`, (中文(简体) ), `DislikeFillIcon`, (中文(简体) ), `EmojiIcon`, (中文(简体) ), `FeedIcon`, (中文(简体) ), `FlagIcon`, (中文(简体) ), `FlagFillIcon`, (中文(简体) ), `FundingIcon`, (中文(简体) ), `FundingFillIcon`, (中文(简体) ), `GraphLineIcon`, (中文(简体) ), `HashtagIcon`, (中文(简体) ), `HistoryIcon`, (中文(简体) ), `ImageIcon`, (中文(简体) ), `ImageFillIcon`, (中文(简体) ), `LabelIcon`, (中文(简体) ), `LabelFillIcon`, (中文(简体) ), `LaptopIcon`, (中文(简体) ), `LaptopFillIcon`, (中文(简体) ), `LightbulbIcon`, (中文(简体) ), `LockIcon`, (中文(简体) ), `MarkAsReadIcon`, (中文(简体) ), `MarkAsUnreadIcon`, (中文(简体) ), `MoreIcon`, (中文(简体) ), `OptOutIcon`, (中文(简体) ), `PlaceIcon`, (中文(简体) ), `PlaceFillIcon`, (中文(简体) ), `PricetagIcon`, (中文(简体) ), `PricetagFillIcon`, (中文(简体) ), `PublishIcon`, (中文(简体) ), `QuoteIcon`, (中文(简体) ), `QuoteFillIcon`, (中文(简体) ), `QuoteNoCircledIcon`, (中文(简体) ), `QuoteNoCircledFillIcon`, (中文(简体) ), `ReportIcon`, (中文(简体) ), `RssIcon`, (中文(简体) ), `RssFillIcon`, (中文(简体) ), `SettingsIcon`, (中文(简体) ), `SettingsFillIcon`, (中文(简体) ), `SoundIcon`, (中文(简体) ), `StrikethroughIcon`, (中文(简体) ), `TodayIcon`, (中文(简体) ), `UpLevelIcon`, (中文(简体) ), `UploadIcon`, (中文(简体) ), `VideoIcon`

## 迁移到 v 2. 0.0

2.0.0版本包括从Figma图标库同步中分解更改. 已更新图标名称,以遵循一致的命名惯例.

### 重命名图标 (6)

| 旧名 | 新名称 | 变动 |
| --- | --- | --- |
| `CloseCircleFillIcon` | `CloseCircledFillIcon` | 圆 □ 圆 |
| `QuoteNoCircleFillIcon` | `QuoteNoCircledFillIcon` | 圆 □ 圆 |
| `QuoteNoCircleIcon` | `QuoteNoCircledIcon` | 圆 □ 圆 |
| `HelpNoCircleIcon` | `HelpNoCircledIcon` | 圆 □ 圆 |
| `SettingIcon` | `SettingsIcon` | 设置 − 设置 |
| `TiktokIcon` | `TikTokIcon` | Tiktok – Tiktok (英语) |

### 更新导入

```diff
- import { SettingIcon, TiktokIcon, HelpNoCircleIcon, CloseCircleFillIcon } from '@frontiers/icons'
+ import { SettingsIcon, TikTokIcon, HelpNoCircledIcon, CloseCircledFillIcon } from '@frontiers/icons'
```

## 类型脚本

全部类型脚本支持包括:

```typescript
import type { IconComponent, IconName } from "@frontiers/icons"
import { ChevronRightIcon } from "@frontiers/icons"

const icon: IconComponent = ChevronRightIcon
const name: IconName = "ChevronRightIcon"
```

## 软件包导出

```json
{
  "exports": {
    ".": "./dist/index.mjs",
    "./components": "./dist/components/index.mjs",
    "./svg/*": "./svg/*.svg"
  }
}
```

## 捐款

关于发展和贡献准则,见 [捐款额](https://npmcn.com/package/%40frontiers/icons/CONTRIBUTING.md)。 。 。 .

## 许可证

麻省理工学院

* * *

**203 个图标** 二. 支助 **第3组** 二. 支助 **类型脚本** 二. 支助 **树能震动** 二. 支助 **零依赖关系**

## 常见问题

### @frontiers/icons 是什么？

综合图标库,有203个SVG图标和Frontiers设计系统的Vue 3组件

### 如何安装 @frontiers/icons？

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

### @frontiers/icons 支持 TypeScript 吗？

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

### @frontiers/icons 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @frontiers/icons 可以商用吗？

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

### @frontiers/icons 的下载量有多少？

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

### @frontiers/icons 还在维护吗？

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