-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from pxblue/dev
Merge Master
- Loading branch information
Showing
2 changed files
with
58 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,85 @@ | ||
| # PX Blue Supplemental Icons | ||
|
|
||
| [](https://www.npmjs.com/package/@pxblue/icons) | ||
| [](https://www.npmjs.com/package/@pxblue/icons-svg) | ||
| [](https://www.npmjs.com/package/@pxblue/ng-progress-icons) | ||
| [](https://www.npmjs.com/package/@pxblue/react-progress-icons) | ||
| # PX Blue Symbols | ||
| [](https://www.npmjs.com/package/@pxblue/symbols) | ||
| [](https://circleci.com/gh/pxblue/icons/tree/master) | ||
| [](https://circleci.com/gh/pxblue/symbols/tree/master) | ||
|
|
||
| This is a library of supplemental icons, to be used in conjunction with the standard Material Design icons in PX Blue applications. | ||
| This is a library of one-line symbols for use in PX Blue applications. | ||
|
|
||
| ## Installation | ||
|
|
||
| To install the PX Blue icon font from NPM as a dependency for your project, you can run one of the following commands in your project root: | ||
|
|
||
| To install the PX Blue symbols from NPM as a dependency for your project, you can run one of the following commands in your project root: | ||
| ``` | ||
| npm install --save @pxblue/icons | ||
| npm install --save @pxblue/symbols | ||
| or | ||
| yarn add @pxblue/icons | ||
| yarn add @pxblue/symbols | ||
| ``` | ||
|
|
||
| You then need to reference the font in your application so that it is available for use. | ||
|
|
||
| #### Angular | ||
|
|
||
| In order to use the icon font, you will need to modify your angular.json file "styles" entries (there is one under "build" and one under "test") to include the icon font reference: | ||
| ## Usage | ||
| ### Angular | ||
| The simplest way to use these SVG symbols in Angular is to register them with the matIconRegistry so they can be used with the ```<mat-icon>``` tag. You can register symbols individually, or as the entire PX Blue set: | ||
|
|
||
| ``` | ||
| "styles": [ | ||
| "src/styles.scss", | ||
| "./node_modules/@pxblue/icons/iconfont/PXBlueIcons.css" | ||
| ], | ||
| ``` | ||
| import { Component } from "@angular/core"; | ||
| import { MatIconRegistry } from "@angular/material/icon"; | ||
| import { DomSanitizer } from "@angular/platform-browser"; | ||
| #### React | ||
| declare var require: any; | ||
| const symbol = require("@pxblue/symbols/battery.svg"); // individual symbol | ||
| const symbolSet = require("@pxblue/symbols/symbols.svg"); // full set | ||
| ``` | ||
|
|
||
| For React, you'll need to require the font in your top-level JS file (typically index.js). | ||
| Then, in your constructor, register the symbol or the symbol set. It will then be available for use as a ```<mat-icon>```. | ||
|
|
||
| #### Individual Icon | ||
| ``` | ||
| require('@pxblue/icons/iconfont/PXBlueIcons.css'); | ||
| // app.component.ts | ||
| export class AppComponent { | ||
| constructor( | ||
| private matIconRegistry: MatIconRegistry, | ||
| private domSanitizer: DomSanitizer | ||
| ) { | ||
| this.matIconRegistry.addSvgIcon( | ||
| "battery", | ||
| this.domSanitizer.bypassSecurityTrustResourceUrl(symbol) | ||
| ); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## Using the icon font in your application | ||
|
|
||
| This will make the PX Blue icons available to your code by using the appropriate class name (className for React) on a `<i>` element, e.g.: | ||
|
|
||
| ``` | ||
| <i class="pxb-ICONNAME"></i> | ||
| // app.component.html | ||
| <mat-icon svgIcon="battery"></mat-icon> | ||
| ``` | ||
|
|
||
| ### Applying Different Colors | ||
|
|
||
| To change the color of the icon you are using, simply set the CSS color property. This property is inheritable, so if the property is not set on your icon, it will be inherited from the parent container. | ||
|
|
||
| #### Entire Icon Set | ||
| ``` | ||
| <i class="pxb-ICONNAME" style="color: red"></i> | ||
| // app.component.ts | ||
| export class AppComponent { | ||
| constructor( | ||
| private matIconRegistry: MatIconRegistry, | ||
| private domSanitizer: DomSanitizer | ||
| ) { | ||
| this.matIconRegistry.addSvgIconSetInNamespace('px-symbols', this.domSanitizer.bypassSecurityTrustResourceUrl(symbolSet)); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### Available Icons | ||
|
|
||
| See the [Iconography](https://pxblue.github.io/style/iconography) on pxblue.github.io for a list of currently available icons. | ||
|
|
||
| ## Usage Alternatives | ||
|
|
||
| The icon font is a great way to include lots of icons in your application. If you only need a few, you can also check out these alternative packages: | ||
| ``` | ||
| // app.component.ts | ||
| <mat-icon svgIcon="px-symbols:battery"></mat-icon> | ||
| ``` | ||
|
|
||
| - [SVG Icons](https://www.npmjs.com/package/@pxblue/icons-svg) | ||
| - [React Components](https://www.npmjs.com/package/@pxblue/icons-mui) | ||
| ### React | ||
| ``` | ||
| const symbol = require('@pxblue/symbols/SYMBOL_NAME.svg'); | ||
| ... | ||
| <img src={symbol}/> | ||
| ``` | ||
|
|
||
| We also have PX Blue oneline symbols (ported from PX Blue 1.0) available: | ||
| >NOTE: If you will be using many of these symbols in your application, we recommend you use [@pxblue/symbols-mui](https://www.npmjs.com/package/@pxblue/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. | ||
| - [SVG Symbols](https://www.npmjs.com/package/@pxblue/symbols) | ||
| - [React Components](https://www.npmjs.com/package/@pxblue/symbols-mui) | ||
| ### Available Symbols | ||
| Please see [Available Symbols](https://github.com/pxblue/symbols/blob/master/available_symbols.md) 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 . | ||
|
|
||
|
|
||
| Please read the instructions in the [Design](https://github.com/pxblue/icons/blob/master/design/README.md) folder before creating or submitting new icons. |