# @featherk/icons 中文文档

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

版本：0\.19\.4
npm 元数据更新时间：2026-11-13T20:41:08.603Z
中文译文更新时间：2026-11-14T12:51:49.086Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40featherk/icons
原文对照：https://npmcn.com/package/%40featherk/icons/?lang=original

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

- 包体积（解压后）：2.1 MB，48 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：vite ^7\.0\.0 \|\| ^8\.0\.0，@progress/kendo-vue-common ^6\.4\.1
- 首次发布：2025-10-07T20:13:57.621Z
- 最新版本发布：2026-11-13T20:41:08.367Z
- 近 30 天下载量：2802（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：121（近 12 个月 108 个）

## 中文简介

由 Kendo UI 提供的一套 SVG 图标 `SvgIcon` 组件.

## 安装

```sh
npm install @featherk/icons
```

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

## README

# @ featherk/ icons (英语)

由 Kendo UI 提供的一套 SVG 图标 `SvgIcon` 组件.

建造和试验 **坚道UI代表Vue 6.4.1** (单位:千美元)`@progress/kendo-vue-common` 是一个可选的同伴依赖).

## 使用量

获得圣像有两种方法. 两者都为剑道返回相同的图标对象 `SvgIcon`; 它们在图标设置了多少应用程序捆绑上有所不同.

| 前进 | 自兹 | 你的应用程序包 |
| --- | --- | --- |
| 已命名的导入 : `import { searchIcon }` | 0.1.8. (中文(简体) ) | 只有您导入的图标( 每个在 1 KB 以下) |
| `getCustomIcon("search")` (单位:千美元)`CustomIcon`(中文(简体) ) | 在此之前 | 包中的每个图标( 大约120 KB gzip) |

`getCustomIcon` 不变且完全向后兼容,因此已存在的代码继续工作而不作修改. 因为它看起来图标的名字,一个捆绑者无法分辨你使用的是哪个,所以可以装入所有的. 切换到命名的导入只装入您指定的图标 .

### 已命名进口( 建议)

每个图标都有一个命名导出: 骆驼中的图标名称 大小写加 `Icon`这样 `date_range` 实值 `dateRangeIcon`编辑 [图标](https://github.com/NantHealth/featherk/blob/integration/packages/icons/docs/ICONS.md) 列出每个导出名称.

```html
<template>
  <SvgIcon :icon="searchIcon" />
</template>
<script setup lang="ts">
  import { SvgIcon } from "@progress/kendo-vue-common";
  import { searchIcon } from "@featherk/icons";
</script>
```

### `getCustomIcon` (装入每个图标)

使用 `getCustomIcon` 当图标名称只在运行时已知时,或更改颜色或视图框。 它需要一个 `CustomIcon` 名称并返回每个调用的新图标对象 :

```ts
import { getCustomIcon } from "@featherk/icons";

const icon = getCustomIcon("search");
```

通话 `getCustomIcon` 应用程序中的任何部分都会将完整的图标集捆绑起来,即使命名的导入被其它地方使用. 这同样适用于进口 `icons` 登记.

## 类型

-   `CustomIcon`: 支持的图标标识字符串的结合(参见 `packages/icons/src/custom-icon.ts`) (中文(简体) ).
-   `GetCustomIconOptions`数字 : `{ viewBox?: string; color?: string }` —— 说 `viewBox` 覆盖 SVG 视图框 ; `color` 替换 `currentColor` 填充/中风.

示例——键入图标名称:

```ts
import type { CustomIcon } from "@featherk/icons";

const iconName: CustomIcon = "search";
// const badIcon: CustomIcon = "not-a-real-icon"; // Type error
```

示例 — 使用带有帮助的打出的名称 :

```ts
import { getCustomIcon, type CustomIcon } from "@featherk/icons";

const iconName: CustomIcon = "help";
const icon = getCustomIcon(iconName);
```

示例——更改视图框和颜色:

```html
<template>
  <SvgIcon :icon="helpIcon" />
  <SvgIcon :icon="successIcon" />
</template>
<script setup lang="ts">
  import { SvgIcon } from "@progress/kendo-vue-common";
  import { getCustomIcon } from "@featherk/icons";

  const helpIcon = getCustomIcon("help", {
    viewBox: "0 0 28 28",
    color: "var(--kendo-color-primary)",
  });

  const successIcon = getCustomIcon("check", {
    color: "var(--kendo-color-success)",
  });
</script>
```

用于实验和开发中的帮助者职能(CSS帮助者,基础64) 变体、数据URL使用和相关公用设施) [即将到来](https://npmcn.com/package/%40featherk/icons/docs/COMING-SOON.md)。 。 。 .

## 图标画廊

[查看图标画廊](https://github.com/NantHealth/featherk/blob/integration/packages/icons/docs/ICONS.md)

## 字体优美构建集成

字体优美服务与 `getCustomIcon()` 和自有图标注册。 他们从消费者所安装的Font Cousin软件包中生成所选图标;该软件包包括没有免费或付费的Font Cousin艺术品并授予任何许可证权利.

一个只按键的列表驱动整个设置 :

```sh
# 1. List UX-provided catalog keys in fontawesome.keys.json: { "free": [...], "pro": [...] }
# 2. Install exactly those source packages: Free into the app, Pro into fontawesome-pro-sources/.
#    (Add --free-only when there are no Pro keys.)
npx featherk-fontawesome-setup --manifest fontawesome.keys.json
```

```ts
// 3. Generate them in vite.config.ts; builds include Pro icons wherever fontawesome-pro-sources/ is installed.
featherkFontAwesome({ manifest: "fontawesome.keys.json" });
```

跟随 [FeatherK FontAsome 开发者设置](https://github.com/NantHealth/featherk/blob/integration/packages/icons/docs/fontawesome/FontAwesomeDeveloperSetup.md) 当地和CI的逐步设置。 见 [选择字体优美图标并创建声明](https://github.com/NantHealth/featherk/blob/integration/packages/icons/docs/fontawesome/CreateFontAwesomeManifest.md) 用于键,以及 [字体真棒设置](https://github.com/NantHealth/featherk/blob/integration/packages/icons/docs/fontawesome/FontAwesome.md) 快速启动和高级设置。 仅限元数据的自由/Pro目录发布于 `@featherk/icons/fontawesome/catalog`。 。 。 .

付费源包见 [许可和设置](https://github.com/NantHealth/featherk/blob/integration/packages/icons/docs/fontawesome/LICENSING.md)有利可图是消费者拥有的和可选择的;该套产品没有分发付费艺术品.

## 添加图标

本套件中的图标由已验证的源资产管理 [南特卫生/摄影](https://github.com/NantHealth/iconography)见 [图标贡献指南](https://github.com/NantHealth/featherk/blob/integration/packages/icons/docs/ADDING-ICONS.md) 用于源到包复制和生成工作流程.

## 更改日志

向所有人公布历史 `@featherk/*` 软件包以单一方式维护 [变动情况](https://github.com/NantHealth/featherk/blob/integration/CHANGELOG.md)。 。 。 .

## 常见问题

### @featherk/icons 是什么？

由 Kendo UI 提供的一套 SVG 图标 SvgIcon 组件\.

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

在项目目录运行 npm install @featherk/icons，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 featherk-fontawesome、featherk-fontawesome-setup，可以用 npx featherk-fontawesome 直接运行。

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

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

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

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

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

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

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

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

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

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