# @pxblue/ng-progress-icons

> Angular progress icons for PX Blue applications

Latest version **1.2.1** (published 2020-10-27) · BSD-3-Clause license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @pxblue/ng-progress-icons
pnpm add @pxblue/ng-progress-icons
yarn add @pxblue/ng-progress-icons
bun add @pxblue/ng-progress-icons
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2020-10-27 |
| First published | 2018-11-15 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 451.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | pxblue |
| Maintainers | px-blue |
| Keywords | progress, icons, pxblue |

## Links

- npm: https://www.npmjs.com/package/@pxblue/ng-progress-icons
- Repository: https://github.com/pxblue/icons
- Homepage: https://github.com/pxblue/icons#readme
- Issues: https://github.com/pxblue/icons/issues
- npm.io page: https://npm.io/package/@pxblue/ng-progress-icons

## Dependencies (2)

- [color](https://npm.io/package/color.md) ^3.1.2
- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 1.2.1 (latest) — 2020-10-27
- 1.2.0 — 2020-09-30
- 1.1.4 — 2019-07-10
- 1.1.3 — 2019-05-22
- 1.1.1 — 2018-12-14
- 1.1.0 — 2018-12-14
- 1.0.1 — 2018-11-16
- 1.0.0 — 2018-11-15

## README

# PX Blue Progress Icons

[![](https://img.shields.io/npm/v/@pxblue/ng-progress-icons.svg?label=@pxblue/ng-progress-icons&style=flat)](https://www.npmjs.com/package/@pxblue/ng-progress-icons)
[![](https://img.shields.io/circleci/project/github/pxblue/icons/master.svg?style=flat)](https://circleci.com/gh/pxblue/icons/tree/master)

<img width="100%" style="max-width: 600px" alt="Progress icons" src="https://raw.githubusercontent.com/pxblue/icons/master/progress/assets/progress-icons.png" />

This is a library of icons with dynamic fill capabilities that can be used to show progress (similar to a traditional progress spinner or bar). These can be used to show health, battery life, etc.

Currently, we have icons available for:

-   battery
-   heart
-   pie
-   ups

## Installation

To install the PX Blue progress icons from NPM as a dependency for your project, you can run one of the following commands in your project root:

```
yarn add @pxblue/ng-progress-icons // for Angular components
```

## Using the progress icons in your application

The progress icon components can be imported and used like you would use any other component. You can manually set the desired color for the icon, otherwise it will inherit the text color of its parent container;

```ts
// app.module.ts
import { NgProgressIconsModule } from '@pxblue/ng-progress-icons';

...
imports: [
    NgProgressIconsModule
],
```

```html
<!-- app.component.html -->
<battery-progress percent="80" size="36" color="green" [charging]="true" [outlined]="true"></battery-progress>
<heart-progress percent="99" size="36" color="pink" [outlined]="true"></heart-progress>
<pie-progress percent="30" size="36" color="#0000ff" ring="4" [outlined]="true"></pie-progress>
<ups-progress percent="10" size="36" color="#0000ff" [outlined]="true"></ups-progress>
```

## API

### Shared Attributes

These props are available on all of the progress icons in this package.

<div style="overflow: auto;">

| @Input           | Description                            | Type                               | Required | Default        |
| ---------------- | -------------------------------------- | ---------------------------------- | -------- | -------------- |
| backgroundColor  | Background color for the unfilled area | `string`                           | no       |                |
| color            | The color used for the icon fill       | `string`                           | no       | 'currentColor' |
| labelColor       | Label text color                       | `string`                           | no       |                |
| labelPosition    | Where to display the text label        | `top, bottom, center, right, left` | no       | `center`       |
| labelSize        | Size of the label in px                | `number`                           | no       | `size/4`       |
| outlined         | Whether to use the outlined style      | `boolean`                          | no       | false          |
| percent          | The amount to fill the icon (0-100)    | `number`                           | no       | 100            |
| showPercentLabel | Option to show percentage overlay      | `boolean`                          | no       | false          |
| size             | The size of the icon (in px)           | `number`                           | no       | 24             |

</div>

Any other props supplied will be provided to the root element (`svg`).

### Battery Attributes

The battery supports all of the shared attributes above and the following additional attribute:

| @Input   | Description                            | Type      | Required | Default |
| -------- | -------------------------------------- | --------- | -------- | ------- |
| charging | Whether to show the charging indicator | `boolean` | no       | false   |

### Pie Attributes

The pie supports all of the shared attributes above and the following additional attribute:

| @Input | Description                                                        | Type     | Required | Default |
| ------ | ------------------------------------------------------------------ | -------- | -------- | ------- |
| ring   | The thickness of the outer ring (1 = thin ring, 10 = full circle ) | `number` | no       | 10      |

## Building & Packaging

These progress icons are currently created manually by modifying the svg files from the design folder with various clip paths and fill algorithms. They are then packaged up for distribution via npm.

The Angular icons are built using the library packages built into the Angular CLI ([read more](https://github.com/angular/angular-cli/wiki/stories-create-library)).

To create a new component:

```sh
cd icons/progress/angular
ng generate component component-name --project=ng-progress-icons
```

And then to create the /dist version:

```sh
ng build ng-progress-icons
or
yarn build
```

Once you have built the library, you can publish to npm via:

```sh
cd dist/ng-progress-icons
npm version patch
npm publish
```

---
_Source: https://npm.io/package/@pxblue/ng-progress-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._