Brightlayer UI Symbols


This is a library of one-line symbols for use in Brightlayer UI applications.

Installation

To install the Brightlayer UI symbols from NPM as a dependency for your project, you can run one of the following commands in your project root:
``sh
npm install --save @brightlayer-ui/symbols
or
yarn add @brightlayer-ui/symbols
`

Usage

$3

The simplest way to use these SVG symbols in Angular is to register them with the matIconRegistry so they can be used with the `` tag. You can register symbols individually, or as the entire Brightlayer UI set:

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

declare var require: any;
const symbol = require("@brightlayer-ui/symbols/battery.svg"); // individual symbol
const symbolSet = require("@brightlayer-ui/symbols/symbols.svg"); // full set
`

Then, in your constructor, register the symbol or the symbol set. It will then be available for use as a ``.

#### Individual Icon
`ts
// app.component.ts
export class AppComponent {
constructor(
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer
) {
this.matIconRegistry.addSvgIcon(
"battery",
this.domSanitizer.bypassSecurityTrustResourceUrl(symbol)
);
}
}
`

`html
// app.component.html

`

#### Entire Icon Set
`ts
// app.component.ts
export class AppComponent {
constructor(
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer
) {
this.matIconRegistry.addSvgIconSetInNamespace('blui-symbols', this.domSanitizer.bypassSecurityTrustResourceUrl(symbolSet));
}
}
`

`html
// app.component.ts

`

$3


`jsx
const symbol = require('@brightlayer-ui/symbols/SYMBOL_NAME.svg');
...

``

>NOTE: If you will be using many of these symbols in your application, we recommend you use @brightlayer-ui/symbols-mui to simplify usage. This library makes more sense if you just need one or two symbols or if you want to reduce the size of your bundle.

$3

Please see Available Symbols for a list of currently available symbols.

For Icon Creators

Each symbol has its own folder in the /icons/symbols folder, which includes the clean SVG file .