4.3.3 • Published 9 months ago

@energycap/energycap-icons v4.3.3

Weekly downloads
101
License
SEE LICENSE IN LI...
Repository
-
Last release
9 months ago

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-icons

Angular Projects

SVGs

  1. Import the EnergyCapIconsModule.

    @NgModule({
        declarations: [
        AppComponent
        ],
        imports: [
        CommonModule,
        EnergyCapIconsModule
        ],
        providers: [],
        bootstrap: [AppComponent]
    })
    export class AppModule { }
  2. In your templates, use the following snippet

    <ec-icon icon="icon-delete"></ec-icon>

Webfont

  1. Add webfonts directory to assets configuration under your project in angular.json

    ...
    "assets": [
        {
            "glob": "**/*",
            "input": "node_modules/@fortawesome/fontawesome-pro/webfonts",
            "output": "./assets/webfonts"
        }
    ],
    ...
  2. Add library css to the styles configuration under your project in angular.json

    ...
    "styles": [
        "node_modules/@energycap/energycap-icons/energycap-icons.min.css"
    ],
    ...
  3. In your templates, use the following snippet

    <i class="ec-icon icon-delete"></i>

Basic CSS with webfont (Non-Angular projects)

  1. Copy webfonts directory from @fortawesome/fontawesome-pro to an assets folder at the root of your website
  2. Add the energycap-icons.min.css file in the <head> of your website pages

    <link rel="stylesheet" href="path/to/energycap-icons.min.css">
  3. 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>
4.3.2

10 months ago

4.3.1

10 months ago

4.3.3

9 months ago

4.3.0

10 months ago

4.0.7

1 year ago

4.0.6

1 year ago

4.0.9

1 year ago

4.0.10

1 year ago

4.0.11

1 year ago

4.2.2

11 months ago

4.2.1

11 months ago

4.2.0

11 months ago

4.1.0

1 year ago

4.1.2

12 months ago

4.1.1

12 months ago

4.0.5

1 year ago

4.0.4

1 year ago

4.0.1

2 years ago

4.0.0

2 years ago

4.0.3

1 year ago

4.0.2

2 years ago

3.2.2

2 years ago

3.2.1

2 years ago

3.1.21

2 years ago

3.1.20

2 years ago

3.1.19

2 years ago

3.3.1

2 years ago

3.3.0

2 years ago

3.1.18

2 years ago

3.1.17

2 years ago

3.1.16

3 years ago

3.1.15

3 years ago

3.1.12

3 years ago

3.1.14

3 years ago

3.1.13

3 years ago

3.1.11

3 years ago

3.1.10

3 years ago

3.0.11

3 years ago

3.0.10

3 years ago

3.0.9

3 years ago

3.0.8

3 years ago

3.0.7

3 years ago

3.0.6

4 years ago

3.0.5

4 years ago

3.0.4

4 years ago

3.0.3

4 years ago

3.0.2

4 years ago

3.0.1

4 years ago

3.0.0

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.1.13

4 years ago

1.1.12

4 years ago

1.1.11

4 years ago

1.1.10

4 years ago

1.1.9

4 years ago

1.1.8

5 years ago

1.1.7

5 years ago

1.1.6

5 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.15

5 years ago

1.0.14

5 years ago

1.0.13

5 years ago

1.0.12

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.3

5 years ago