/angular-icon-morphing

SVG Icon morphing Library for Angular

Primary LanguageTypeScript

Angular-Icon-Morphing

Angular library to animate icons with smooth morphing animation

Live Demo

Demo source

Install

Install npm package

npm install --save-dev angular-icon-morphing

Add Morpheus library to angular.json scripts

{
  ...
  "projects": {
    ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "scripts": [
              "node_modules/svg-morpheus/compile/minified/svg-morpheus.js"
            ]
          },
          ...
        }
      }
  }
}

Getting Started

Import Module

...
import { AngularIconMorphingModule } from 'angular-icon-morphing';

@NgModule({
  declarations: [
    AppComponent,
    IconComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AngularIconMorphingModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use aim-icon component to animate yout svg Icon

<aim-icon [active]="isActive">
    <svg width="24" height="24">
        <g #startIcon><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></g>
        <g #endIcon><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></g>
    </svg>
</aim-icon>

Documentation

aim-icon component can be used with some parameters

Parameter Description Default value
active boolean triggering animation when its value changes false
easing string corresponding to animation type. See complete list of possibilities on live demo stackblitz linear
duration duration of animation in ms 250

Built With

Authors