# @brightlayer-ui/icons-svg 中文文档

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

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

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

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

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

- 包体积（解压后）：2.6 MB，1114 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>=20\.0\.0
- 运行依赖：0 个
- 首次发布：2021-10-28T13:30:21.568Z
- 最新版本发布：2026-10-27T09:48:55.512Z
- 近 30 天下载量：16585（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 6 个）

## 中文简介

Eaton 应用程序的 SVG 图标

## 安装

```sh
npm install @brightlayer-ui/icons-svg
```

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

## README

# 亮层 UI SVG 图标

[![](https://img.shields.io/npm/v/@brightlayer-ui/icons-svg.svg?label=@brightlayer-ui/icons-svg&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/icons-svg) [![Build](https://github.com/etn-ccis/blui-icons/actions/workflows/blui-ci.yml/badge.svg?branch=master)](https://github.com/etn-ccis/blui-icons/actions/workflows/blui-ci.yml)

这是用于Brightlayer UI应用程序的SVG图标库.

## 安装

要安装来自国家防范机制的亮层UI SVG图标作为您项目的依赖,您可以在您的项目根中运行以下命令之一:

```
npm install --save @brightlayer-ui/icons-svg
or
yarn add @brightlayer-ui/icons-svg
```

### 角质

Angular 如下描述的方法要求您安装 Angular CDK 和 Angular 材料:

```
cd projectname
yarn add @angular/cdk @angular/material
```

并包括下列模块:

```
// app.module.ts
import {MatIconModule} from '@angular/material/icon';
import {HttpClientModule} from '@angular/common/http';
...
imports:[
  MatIconModule,
  HttpClientModule
]
```

## 使用量

### 角质

在Angular使用这些SVG的最简单方法是在matIconRegistry中注册,以便可以使用 `<mat-icon>` 标签。 您可以单独注册图标, 或者作为整个 Brightlayer UI 设置 :

```
import { Component } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";

declare var require: any;
const icon = require("@brightlayer-ui/icons-svg/breaker.svg").default; // individual icon
const iconSet = require("@brightlayer-ui/icons-svg/icons.svg").default; // full set
```

然后,在构建器中注册图标或图标集。 之后,将用作一种 `<mat-icon>`。 。 。 .

#### 单个图标

```
// app.component.ts
export class AppComponent {
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    this.matIconRegistry.addSvgIcon(
      "breaker",
      this.domSanitizer.bypassSecurityTrustResourceUrl(icon)
    );
  }
}
```

```
// app.component.html
<mat-icon svgIcon="breaker"></mat-icon>
```

#### 整个图标集

```
// app.component.ts
export class AppComponent {
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    this.matIconRegistry.addSvgIconSetInNamespace('blui-icons', this.domSanitizer.bypassSecurityTrustResourceUrl(iconSet));
  }
}
```

```
// app.component.ts
<mat-icon svgIcon="blui-icons:bearing"></mat-icon>
```

#### 应用不同的颜色

要改变您使用的图标的颜色, 只需设置 CSS 颜色属性 。 此地产是可继承的, 因此如果地产没有设置在您的图标上, 它将会从母容器中继承 .

```
<mat-icon svgIcon="blui-icons:bearing" style="color: red"></mat-icon>
```

### 反应

```
import icon from '@brightlayer-ui/icons-svg/ICON_NAME.svg';
...
<img src={icon}/>
```

> 注:以这种方式使用的SVG图标将显示为黑色. 填充颜色不能被更改, 因为 SVG 不内置 。 如果您想要给图标取色, 请使用 [@brightlayer-ui/相声-mui](https://www.npmjs.com/package/@brightlayer-ui/icons-mui) 或者我们 [图标字体](https://www.npmjs.com/package/@brightlayer-ui/icons)。 。 。 .

> 注:如果您在应用程序中使用许多这些图标,我们建议您使用 [@brightlayer-ui/相声-mui](https://www.npmjs.com/package/@brightlayer-ui/icons-mui) 或者我们 [图标字体](https://www.npmjs.com/package/@brightlayer-ui/icons) 简化使用。 这个库如果只需要一两个图标,或者想减小捆绑的大小,就更有意义了.

### 反应- Native

React Industrial没有为支持SVG图像而构建. 不过,有些图书馆可供您使用。 我们建议使用 [反应-内生- svg- 转换器](https://github.com/kristerkari/react-native-svg-transformer) 与 [反应-内生-svg](https://github.com/react-native-community/react-native-svg)。这些将允许您通过导入并用作正常组件来包含 Brightlayer UI SVG 图标 :

```
import Leaf from "@brightlayer-ui/icons-svg/leaf.svg";
...
<Leaf width={50} height={50} fill={'green'} />
```

### 可用的 SVG 图标

见 [图标](https://brightlayer-ui.github.io/style/iconography) 用于当前可用的图标列表.

## 常见问题

### @brightlayer-ui/icons-svg 是什么？

Eaton 应用程序的 SVG 图标

### 如何安装 @brightlayer-ui/icons-svg？

在项目目录运行 npm install @brightlayer-ui/icons-svg，或使用 pnpm add / yarn add / bun add。

### @brightlayer-ui/icons-svg 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/brightlayer-ui\_\_icons-svg 是否存在。

### @brightlayer-ui/icons-svg 支持 ESM 还是 CommonJS？

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

### @brightlayer-ui/icons-svg 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @brightlayer-ui/icons-svg 可以商用吗？

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

### @brightlayer-ui/icons-svg 的下载量有多少？

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

### @brightlayer-ui/icons-svg 还在维护吗？

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