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

• SVG-Morpheus - The JS library used

Authors

• Rémy Villain - rvillain