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

| Name | Type | Default | Usage | | ------ | ------ | ------ | ------ | | ax-icon | AxIcon | --- | Icon name | | stroke | string | #00000 | Icon color | | size | number | 28 | Icon size in pixel | | linejoin | AxiomIconLinejoin | round | linejoin is a presentation attribute defining the shape to be used at the corners of paths when they are stroked. Available values are : arcs, round, bevel | | linecap | AxiomIconLinecap | round | linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked. Available values are : butt, round, square | | smartColor | boolean | true | Adaptive stroke color related to parent background | | parent | element | --- | Parent element that will be use for smart color feature |

License

MIT