Animated Icons

a library of sass mixins for animated icons

View Demo

Installation

Download node at nodejs.org and install it, if you haven't already.

npm install elr-scss-animated-icons

or

yarn add elr-scss-animated-icons

Implementation

Scss

@import "elr-scss-animated-icons";

.icon-animated {
  @include elr-icon-animated();
}

@import "elr-scss-animated-icons";

.icon-border {
  @include elr-icon-border();
}

@import "elr-scss-animated-icons";

.icon-border-pop {
  @include elr-icon-border-pop();
}

@import "elr-scss-animated-icons";

.icon-border-pull {
  @include elr-icon-border-pull();
}

@import "elr-scss-animated-icons";

.icon-background-fade {
  @include elr-icon-background-fade();
}

@import "elr-scss-animated-icons";

.icon-dash-rotate {
  @include elr-icon-dash(
    $config: (
      rotate: true,
    )
  );
}

@import "elr-scss-animated-icons";

.icon-close {
  @include elr-icon-close;
}

@import "elr-scss-animated-icons";

.icon-arrow-left {
  @include elr-icon-arrow;
}

@import "elr-scss-animated-icons";

.icon-arrow-right {
  @include elr-icon-arrow(
    $config: (
      direction: "right",
    )
  );
}

HTML

<div class="icon-animated icon-border">
  <i class="fa fa-phone"></i>
</div>
<div class="icon-animated icon-border-pop">
  <i class="fa fa-phone"></i>
</div>
<div class="icon-animated icon-border-pull">
  <i class="fa fa-phone"></i>
</div>
<div class="icon-animated icon-background-fade">
  <i class="fa fa-phone"></i>
</div>
<div class="icon-animated icon-dash">
  <i class="fa fa-phone"></i>
</div>
<div class="icon-animated icon-dash-rotate">
  <i class="fa fa-phone"></i>
</div>

<button class="js-icon icon-close">
  <span></span>
</button>
<button class="js-icon icon-arrow-left active">
  <span></span>
</button>
<button class="js-icon icon-arrow-right active">
  <span></span>
</button>

License

SEE LICENSE IN LICENSE.md