# @frontiers/pictograms 中文文档

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

版本：1\.2\.0
npm 元数据更新时间：2026-01-16T08:16:05.580Z
中文译文更新时间：2026-11-15T15:05:34.470Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：285 kB，59 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：vue ^3\.0\.0
- 首次发布：2025-10-29T08:08:43.368Z
- 最新版本发布：2026-01-16T08:16:05.438Z
- 近 30 天下载量：7628（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 1 个）

## 中文简介

综合象形图库,内有彩色SVG插图和Frontiers设计系统的Vue 3组件

## 安装

```sh
npm install @frontiers/pictograms
```

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

## README

# @ frontiers/ 图片

综合象形图库 有彩色 SVG 插图和 Vue 3 组件用于边疆设计系统.

## 特征

-   🎨 **彩色说明** - 全色象形图(不是像图标那样的一色相)
-   📐 **256px 大小** - 2xl大小的显著显示变体
-   🎭 **颜色变量** - 每个象形图的多色方案(红色、蓝色、绿色等)
-   ⚡ **Vue 3 组件** - 有类型脚本支持的可准备使用的Vue组件
-   📦 **直接 SVG 访问** - 必要时直接导入 SVG 文件
-   🔧 **自定义大小** - Vue组件可调整尺寸道具

## 安装

```bash
npm install @frontiers/pictograms
```

## 使用量

### Vue 组件

```vue
<script setup>
import {
  SearchBluePictogram,
  DeniedRedPictogram,
  ScienceBluePictogram,
} from "@frontiers/pictograms"
</script>

<template>
  <div>
    <!-- Default size (256px) -->
    <SearchBluePictogram />

    <!-- Custom size -->
    <DeniedRedPictogram :size="128" />
    <ScienceBluePictogram size="512" />

    <!-- With custom classes -->
    <SearchBluePictogram :size="200" class="my-custom-class" />
  </div>
</template>
```

### 直接 SVG 导入

```javascript
import searchBlue from "@frontiers/pictograms/svg/search-pictogram-blue.svg"
import deniedRed from "@frontiers/pictograms/svg/denied-pictogram-red.svg"
```

## 组件命名

象形图组件遵循此命名模式:

-   **SVG 文件名**数字 : `{name}-pictogram-{color}.svg` (婴儿箱)
-   **组件名称**数字 : `{Name}{Color}Pictogram` (PascalCase,为避免冗余而去掉"-相图-")

实例:

| SVG 文件 | 组件名称 |
| --- | --- |
| `search-pictogram-blue.svg` | `SearchBluePictogram` |
| `denied-pictogram-red.svg` | `DeniedRedPictogram` |
| `science-pictogram-blue.svg` | `ScienceBluePictogram` |

## 颜色变量

象形图有多种颜色变体:

-   QQ 蓝色( 默认)
-   红色
-   绿色
-   黄色
-   橘子酱
-   紫色( 紫色 )

如果象形图没有特定的颜色变体,则将蓝色变体作为默认.

## 道具

所有象形图组件接受以下道具:

### `size`

-   **类型**数字 : `Number | String`
-   **默认**数字 : `256`
-   **说明**: 像素象形图的宽度和高度

```vue
<AccessibilityBluePictogram :size="128" />
<AccessibilityBluePictogram size="256" />
```

## 与图标的差异

| 特性 | 图标 | 图像 |
| --- | --- | --- |
| **大小** | 24px (英语) | 256页 |
| **颜色** | 单色( 当前颜色) | 全色( 保留) |
| **使用量** | UI 元素, 按钮 | 说明、标题 |
| **默认大小** | 24个 | 256号 |
| **备选案文** | 大小变体 | 颜色 + 大小变体 |

## 类型脚本支持

此软件包包括类型脚本定义 :

```typescript
import type { PictogramComponent, PictogramProps } from "@frontiers/pictograms"

const MyPictogram: PictogramComponent = AccessibilityBluePictogram
```

## 发展

### 法格玛大楼

此软件包包含从 Figma 导出和生成组件的脚本 :

```bash
# Export SVGs from Figma
npm run export

# Generate Vue components from SVGs
npm run generate

# Do both
npm run build
```

**所需资源**数字 :

-   图片个人访问 托肯( 设置于 `.env` 文件为 `FIGMA_TOKEN`(中文(简体) )
-   访问边疆基金会 Figma 文件

### 图片来源

图片来源于:

**文件**数字 : [基金会](https://www.figma.com/design/jDOnqag4paB2kiJtu2AbqK/Foundations)  
**页次**:🔵相图(节点-id=10265-817)  
**大小**: 2xl (256px) 变种

## 许可证

麻省理工学院

## 捐款

欢迎捐款! 请参看捐款准则的主要存放处.

## 相关软件包

-   **[@ frontiers/ icons (英语)](https://npmcn.com/package/%40frontiers/icons)** - 单色图标库(24px)
-   **[@ frontiers/ preme - preset](https://npmcn.com/package/%40frontiers/preset)** - PrimeVue 主题预设
-   **[@ frontiers/ 尾风插座](https://npmcn.com/package/%40frontiers/tailwind-plugin)** - 尾风CSS公用事业

* * *

**• 为边境定制**

## 常见问题

### @frontiers/pictograms 是什么？

综合象形图库,内有彩色SVG插图和Frontiers设计系统的Vue 3组件

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

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

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

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

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

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

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

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

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

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

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

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