@energycap/energycap-icons v4.3.3
EnergyCAP Icons
Icon library to use with EnergyCAP software projects.
Usage
Install the package from npm
npm install @energycap/energycap-icons:warning: This package includes a peer dependency of Font Awesome Pro. You must have a pro account in order to download the necessary dependencies.
npm install @fortawesome/energycap-iconsAngular Projects
SVGs
Import the
EnergyCapIconsModule.@NgModule({ declarations: [ AppComponent ], imports: [ CommonModule, EnergyCapIconsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }In your templates, use the following snippet
<ec-icon icon="icon-delete"></ec-icon>
Webfont
Add webfonts directory to
assetsconfiguration under your project inangular.json... "assets": [ { "glob": "**/*", "input": "node_modules/@fortawesome/fontawesome-pro/webfonts", "output": "./assets/webfonts" } ], ...Add library css to the
stylesconfiguration under your project inangular.json... "styles": [ "node_modules/@energycap/energycap-icons/energycap-icons.min.css" ], ...In your templates, use the following snippet
<i class="ec-icon icon-delete"></i>
Basic CSS with webfont (Non-Angular projects)
- Copy
webfontsdirectory from@fortawesome/fontawesome-proto anassetsfolder at the root of your website Add the energycap-icons.min.css file in the
<head>of your website pages<link rel="stylesheet" href="path/to/energycap-icons.min.css">Reference icons in your
html<i class="ec-icon icon-delete"></i>
Advanced
Sizes
Apply predefined size classes to modify the font size of a single icon.
<!-- Webfont -->
<i class="ec-icon icon-delete ec-icon-md"></i>
<!-- Angular -->
<ec-icon class="ec-icon-md" icon="icon-delete"></ec-icon>Available sizes are xs(.625rem), sm(.75rem), md(1.5rem), and lg(3rem)
To set the font size to a custom value use the style attribute or a custom css class
If the icon is combined with other text, use the .icon-font-size-inherit utility to set the icon font size to the same font size of the surrounding text.
<p><i class="icon-warning icon-font-size-inherit"></i> CAUTION. Icons at work.</p>Modifiers
If an icon is a single color, it's default color is rgba(26, 26, 35, 0.66). Icon color can be set to the current color of its parent element with the .icon-color-current utility.
<p style="color: red;"><i class="icon-error icon-color-current"></i> ERROR. Something went wrong!</p>Icons be flipped and rotated with the following utility classes
.flip-y.flip-x.rotate-90.rotate-180.rotate-270
Chargeback
EnergyCAP commodity and account icons have special overlays for when a meter or account has chargeback properties. These are overlays are applied with a collection of chargeback classes.
<i class="icon-commodity-electric is-master is-recipient"></i>2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
4 years ago
5 years ago
5 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago