# @brightlayer-ui/react-native-vector-icons 中文文档

规范地址：https://npmcn.com/package/%40brightlayer-ui/react-native-vector-icons/

版本：4\.0\.0
npm 元数据更新时间：2026-10-27T09:48:58.625Z
中文译文更新时间：2026-11-08T15:22:40.358Z
软件包许可：BSD-3-Clause

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

原始 npm 页面：https://www.npmjs.com/package/%40brightlayer-ui/react-native-vector-icons
原文对照：https://npmcn.com/package/%40brightlayer-ui/react-native-vector-icons/?lang=original
项目主页：https://github.com/etn-ccis/blui-icons
源码仓库：https://github.com/etn-ccis/blui-icons

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

- 包体积（解压后）：1.2 MB，17 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=16\.8\.1，react-native \>=0\.60\.0-rc\.0 \<1\.0\.x，react-native-svg \>=12\.0\.0，react-native-vector-icons ^10\.2\.0
- 首次发布：2021-11-01T18:20:29.763Z
- 最新版本发布：2026-10-27T09:48:57.525Z
- 近 30 天下载量：14610（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：27（近 12 个月 7 个）

## 中文简介

用于 React 本地工程的亮层 UI 向量图标, 以反应- 内存- 向量- 相片为基础

## 安装

```sh
npm install @brightlayer-ui/react-native-vector-icons
```

也可以使用：`pnpm add @brightlayer-ui/react-native-vector-icons`、`yarn add @brightlayer-ui/react-native-vector-icons`、`bun add @brightlayer-ui/react-native-vector-icons`

## README

# 反应原生矢量图标

[![](https://img.shields.io/npm/v/@brightlayer-ui/react-native-vector-icons.svg?label=@brightlayer-ui/react-native-vectoricons&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/react-native-vector-icons)

此软件包允许您以同样的方式使用 Brightlayer UI 补充图标 [反应-内生-活性-角](https://www.npmjs.com/package/react-native-vector-icons) 用于材料图标.

## RN CLI 安装

要安装来自国家防范机制的 Blightlayer UI 本地矢量图标作为您的项目的依赖, 您可以在您的工程根中运行以下命令之一 :

```
npm install --save @brightlayer-ui/react-native-vector-icons
or
yarn add @brightlayer-ui/react-native-vector-icons
```

此软件包依赖 [反应-内生-活性-角](https://www.npmjs.com/package/react-native-vector-icons) 作为同伴依赖:

```
npm install --save react-native-vector-icons
or
yarn add react-native-vector-icons
```

此套件中的被剪切的 SVG 助手也需要 `react-native-svg`数字 :

```
npm install --save react-native-svg
or
yarn add react-native-svg
```

> 注意跟随 [整合指示](https://github.com/oblador/react-native-vector-icons#installation) 在文档中提供您工程中的图标.

#### iOS系统

要在 iOS 工程中使用此软件包, 请编辑您的 `Info.plist`

-   在"UIAppFonts"键下,为BrightlayerUIIcons.ttf添加一个条目.

```
<key>UIAppFonts</key>
<array>
  <string>BrightlayerUIIcons.ttf</string>
</array>

```

在更新这些文件后, 您需要安装 Pods 并重新编译您的应用程序 :

```sh
cd ios
pod install
```

#### 机器人

要在 Android 工程中使用此软件包, 如果您之前提供了字体路径 。 格莱尔在建设。 Gradle 你现在需要删除这条路径 :

编辑 `android/app/build.gradle` (没有) `android/build.gradle` )并删除以下内容:

```diff
- apply from: "../../node_modules/@brightlayer-ui/react-native-vector-icons/fonts.gradle"
```

## 为博览会安装

要在您的博览会项目中安装 Blightlayer UI React 本地矢量图标, 请在您的项目根中运行以下命令 :

```sh
yarn add @brightlayer-ui/react-native-vector-icons
```

## Expo Apps 设置指南

`react-native-vector-icons` 支持"博览会",而本地平台不需要再进一步的步骤,但您可以选择遵循以下步骤来设置字体配置插件.

### 设置字体配置插件

这是可选但推荐的,因为通过配置插件,自构建时间起图标字体将在应用程序中可用,而不是在运行时被加载 - [看见更多](https://docs.expo.dev/develop/user-interface/fonts/#with-expo-font-config-plugin)。 。 。 .

需要用吗 [`prebuild`](https://docs.expo.dev/workflow/prebuild/),可以使用配置插件.

1.  在您的 app.config.json / js 中,添加以下内容:

```js
module.exports = {
    expo: {
        plugins: [
            [
                'expo-font',
                {
                    fonts: ['./node_modules/@brightlayer-ui/react-native-vector-icons/Fonts/BrightlayerUIIcons.ttf'],
                },
            ],
        ],
    },
};
```

2.  运行 `npx expo prebuild`。 。 。 .
3.  重建应用程序 : `npx expo run:ios` 或者说 `npx expo run:android`。 。 。 .

### 如何解决iOS问题

如果您遇到iOS构建的问题,请遵循这些步骤来清理您的环境并解决共同的问题:

#### 清洁衍生数据和 iOS 构建艺术

从您的工程根中运行 :

```sh
rm -rf ios/build
rm -rf ios/Pods
rm -rf ios/Podfile.lock
cd ios
pod install
cd ..
```

清洁 Xcode 衍生数据 :

```sh
rm -rf ~/Library/Developer/Xcode/DerivedData
```

#### 重新生成 Codegen 文件( Expo 管理的工作流程)

如果您使用 Expo 预建( 管理的工作流程) , 请运行 :

```sh
npx expo prebuild --clean
```

#### 从 iOS 中删除字体

如果您需要从您的 iOS 项目中删除图标字体 :

1.  在 Xcode 中打开工作空间 .
2.  在项目导航器中,找到 `fonts` 文件夹在 `Resources`。 。 。 .
3.  删除提及 `BrightlayerUIIcons.ttf`。 。 。 .

#### 移徙指南

遵循这个移民指南 了解更多 [移徙](https://npmcn.com/package/%40brightlayer-ui/react-native-vector-icons/Migration.md)

## 使用量

在您的应用程序中使用这些图标与使用反应-内存-vector-icons完全相同(我们使用他们的库来构建我们的,所以API是相同的).

```tsx
import BLUIIcon from '@brightlayer-ui/react-native-vector-icons';
...
<BLUIIcon name={'broccoli'} color={'green'} size={24}/>
```

## SVG 剪贴板斜线图标

如果需要真正的剪接道斜拉片治疗(剪接后切出虹口内容),请使用 `SlashedBLUISvgMaskIcon` 导出为 `react-native-svg` 路径.

```tsx
import { SlashedBLUISvgMaskIcon } from '@brightlayer-ui/react-native-vector-icons';
import { Path } from 'react-native-svg';

<SlashedBLUISvgMaskIcon slashColor={'#777'} slashLength={1.1} size={24}>
    <Path d="M3 3 H21 V21 H3 Z" fill="currentColor" />
</SlashedBLUISvgMaskIcon>;
```

如果您想要直接通过 BLUI 图标名称( 不创建) `Path` 儿童),使用 `SlashedBLUIIcon`数字 :

```tsx
import { SlashedBLUIIcon } from '@brightlayer-ui/react-native-vector-icons';

<SlashedBLUIIcon name={'device'} color={'currentColor'} slashColor={'#777'} slashLength={0.9} size={24} />;
```

## 常见问题

### @brightlayer-ui/react-native-vector-icons 是什么？

用于 React 本地工程的亮层 UI 向量图标, 以反应- 内存- 向量- 相片为基础

### 如何安装 @brightlayer-ui/react-native-vector-icons？

在项目目录运行 npm install @brightlayer-ui/react-native-vector-icons，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.8\.1）、react-native（\>=0\.60\.0-rc\.0 \<1\.0\.x）、react-native-svg（\>=12\.0\.0）、react-native-vector-icons（^10\.2\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @brightlayer-ui/react-native-vector-icons 支持 TypeScript 吗？

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

### @brightlayer-ui/react-native-vector-icons 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @brightlayer-ui/react-native-vector-icons 可以商用吗？

@brightlayer-ui/react-native-vector-icons 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。

### @brightlayer-ui/react-native-vector-icons 的下载量有多少？

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

### @brightlayer-ui/react-native-vector-icons 还在维护吗？

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