ax-icon v1.1.1

Axiom Icon

Online Demo

Usage Demo

Demo source is here

source

Installation

Install component package from npm :

npm install ax-icon

Import component module :

import { AxiomIconModule } from 'ax-icon';

...

@NgModule({
  imports: [
    AxiomIconModule
  ], 
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})

...

Usage

Use [ax-icon] attribute component for <i> tag and assign an icon name to it.

<i [ax-icon]="download"
   [stroke]="'#000" 
   [size]="32" 
   [linejoin]="'round'"
   [linecap]="'round'">
</i>

Smart Color

By assigning [smartColor] and [parent] attributes to ax-icon, Component adapt its stroke color with parent background. Therefore when parent background is dark, stroke color will be light, and vice-versa.

 <div #parent>
  
   <i [ax-icon]="download"
     [stroke]="'#000" 
     [smartColor]="true"
     [parent]="parent"
     [size]="32" 
     [linejoin]="'round'"
     [linecap]="'round'">
  </i>
  
 </div>

When parent background change dynamaticaly, you can call icons refreshing themselves by AxiomIconConfig service.

First import it:

  constructor(private _config: AxiomIconConfig) {

  }
  

And then use refresh function:

  this._config.refresh();
  

Because AxiomIconConfig is a global service, All icons will refresh.

@Input() Params

License

MIT