EnergyCAP Icons
Icon library to use with EnergyCAP software projects.
Usage
Install the package from npm
npm install @energycap/energycap-iconsnpm 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>