亮层 UI SVG 图标

这是用于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 或者我们 图标字体。 。 。 .

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

反应- Native

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

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

可用的 SVG 图标

见 图标 用于当前可用的图标列表.