PX Blue Progress Icons
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:
To install the PX Blue progress icons from NPM as a dependency for your project, you can run the following command in your project root:
yarn add @pxblue/react-progress-icons
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;
These props are available on all of the progress icons in this package.
|backgroundColor||Background color for the unfilled area||
|color||The color used for the icon fill||
|labelColor||Label text color||
|labelPosition||Where to display the text label||
|labelSize||Size of the label in px||
|outlined||Whether to use the outlined style||
|percent||The amount to fill the icon (0-100)||
|showPercentLabel||Option to show percentage overlay||
|size||The size of the icon (in px)||
Any other props supplied will be provided to the root element (
The battery supports all of the shared properties above and the following additional properties:
|charging||Whether to show the charging indicator||
The pie supports all of the shared properties above and the following additional properties:
|ring||The thickness of the outer ring (1 = thin ring, 10 = full circle )||
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 react icons are created as stateless functional components in individual files for each icon.
To create the /dist version of the icons:
cd /reactyarn build
And then to publish:
npm version patchnpm publish